检查jquery中的复选框

Question

我是初学者网络开发者； 我在 Html/Css/jQuery 中制作我的项目。

我在网站上有 5 个复选框。其中 3 个具有 checkboxRequired 类。单击 5 个复选框中的每一个后，我必须检查是否所有 3 个带有 checkboxRequired checkout 的复选框都被选中。

我试试这个解决方案：

$('input[type="checkbox"]').click(function(){
    if($('input:checkbox.checkboxRequired').prop('checked')){
        console.log("Checkbox is checked.");
    }
    else {
        console.log("Checkbox is unchecked.");
    }
});

但它总是显示：复选框未选中。

我该如何修复它？

请帮帮我。

Answer 1

您需要使用 .is() 方法和 :checked 选择器。

单击复选框时 - 您使用所需的类（使用 .each() 方法）迭代复选框，并可以测试每个复选框以查看其是否被选中。

请注意其中的小三元方程，以演示传统 if/else 块的替代方案 - 但它做同样的事情（“？”行相当于 true，“:”相当于 false / else。 ...

编辑 - 我已更新功能以满足您的需求。基本上你需要检查是否所有的复选框都被选中，如果是 - 提交表单，如果没有 - 引发错误模式。

以下修改后的代码应该可以为您做到这一点。

$('input[type="checkbox"]').click(function(){

let total = 0;
let checked = 0;

  $('.checkboxRequired').each(function(index){
    total += 1;
    if( $(this).is(':checked') ) {checked +=1 }
  })
  
  total === checked 
    ? ($('.orderForm').submit(), console.log('Form Submitted'))
    : $('#errorModal').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 1</label><br/>
<label> <input type="checkbox" class="checkbox "/> Checkbox 2</label><br/>
<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 3</label><br/>
<label> <input type="checkbox" class="checkbox checkboxRequired"/> Checkbox 4</label><br/>
<label> <input type="checkbox" class="checkbox "/> Checkbox 5</label>

<!-- form
<form class="orderForm"  method="post"></form>
-->

<!-- Modal -->
<div id="errorModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Error Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>There is a disturbance in the force..... not all required checkboxes are checked</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 2

您可以检查元素本身的检查状态。像这样：

$('input[type="checkbox"]').click(function(){
    if($('input:checkbox.checkboxRequired')[0].checked){
        console.log("Checkbox is checked.");
    }
    else {
        console.log("Checkbox is unchecked.");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkboxRequired">

Answer 3

我会尝试检查是否以这种方式选中了带有.checkboxRequired 的所有 3 个复选框：

$('input[type="checkbox"]').click(function(){
  const checkboxes = $('.checkboxRequired:checked');
  
  if (checkboxes.length === 3) {
    console.log("All 3 required checkboxes are checked.");
  } else {
    console.log("Some required checkbox is unchecked.");
  }
});

演示 - https://codepen.io/vyspiansky/pen/NWNrLXN

Answer 4

因为$('input:checkbox.checkboxRequired') 是通过该选择器选择所有元素。但prop 方法仅适用于第一个元素：

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

文档链接： https://api.jquery.com/prop/

根据你的需要，你可以通过其他方式处理：

1. 最简单的方法：你可以使用属性required - 见docs
2. 如果您需要更多自定义方式，可以执行以下操作：

var $form2 = $('form#action2')
$form2.submit(function(e){
    var isAllReqChecked = true
    $form2.find('input:checkbox.checkboxRequired')
        .each(function propChecker(){
          isAllReqChecked &= $(this).prop('checked')
        })
  alert(isAllReqChecked ? 'All required was checked!' : 'Not all required was checked')
  e.preventDefault()
});

查看demo