检查jquery中的复选框

Posted 2023-03-05

【中文标题】检查jquery中的复选框

【英文标题】：Checking the checkbox in jquery

【发布时间】：2020-12-07 10:35:56

【问题描述】：

我是初学者网络开发者； 我在 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.");
    
);

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

我该如何修复它？

请帮帮我。

【问题讨论】：

.prop 只会给出第一个的值

什么是正确的解决方案？

这能回答你的问题吗？ jQuery if checkbox is checked

【参考方案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>

【讨论】：

谢谢。当我想发送时-选中所有必需的复选框时，此代码是正确的： if($(this).is(':checked')) $('.orderForm').submit(); else $('#errorModal').modal('show'); ?我有错误：jquery-3.5.1.min.js:2 Uncaught RangeError: Maximum call stack size exceeded

【参考方案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">

【参考方案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

【参考方案4】：

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

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

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

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

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

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