【问题标题】:Can I use jQuery to check whether at least one checkbox is checked?我可以使用 jQuery 来检查是否至少选中了一个复选框?
【发布时间】:2011-02-10 16:23:41
【问题描述】:

我有以下可以有许多复选框的 HTML 表单。单击提交按钮时,我希望用户获得一个 javascript 警报,以检查至少一个复选框(如果没有选中)。有没有使用 jQuery 的简单方法来做到这一点?

<form name = "frmTest" id="frmTest">
  <input type="checkbox" value="true" checked="true" name="chk[120]">
  <input type="checkbox" value="true" checked="true" name="chk[128]">
  <input type="checkbox" name="chk[130]">
  <input type="checkbox" name="chk[143]">
  <input type="submit" name="btnsubmit" value="Submit">
</form>

【问题讨论】:

  • 使用&lt;input name="chk[]" value="120"&gt; 可能会更好。另请注意,checked 属性的only 可接受值为“checked”。 checked="true" 是一个错误。

标签: javascript jquery


【解决方案1】:
if(jQuery('#frmTest input[type=checkbox]:checked').length) { … }

【讨论】:

  • :checked 已经返回一个布尔值,因此不需要 .length。 true.length 和 false.length 都提供 undefined
  • @Jan — jQuery('#frmTest input[type=checkbox]:checked') 返回一个 jQuery 对象,其中包含与选择器匹配的所有元素。它不返回布尔值。您可能会将其与 HTMLInputElement.checked 混淆。
【解决方案2】:
$('#frmTest input:checked').length > 0

【讨论】:

  • $('#frmTest:checkbox').length > 0 最好在一定数量的复选框中进行检查。
  • 为什么单选按钮会更好?如果 OP 想要至少一个选项,则选择的单选按钮会将他限制为一个最多
  • @David,我已删除该建议。
【解决方案3】:
$("#frmTest").submit(function(){
    var checked = $("#frmText input:checked").length > 0;
    if (!checked){
        alert("Please check at least one checkbox");
        return false;
    }
});

【讨论】:

    【解决方案4】:
    $("#show").click(function() {
        var count_checked = $("[name='chk[]']:checked").length; // count the checked rows
            if(count_checked == 0) 
            {
                alert("Please select any record to delete.");
                return false;
            }
            if(count_checked == 1) {
                alert("Record Selected:"+count_checked);
    
            } else {
                alert("Record Selected:"+count_checked);
              }
    });
    

    【讨论】:

    • 对我不起作用,jQuery 处理复选框选中事件的方式发生了变化?
    【解决方案5】:

    $('#fm_submit').submit(function(e){
        e.preventDefault();
        var ck_box = $('input[type="checkbox"]:checked').length;
        
        // return in firefox or chrome console 
        // the number of checkbox checked
        console.log(ck_box); 
    
        if(ck_box > 0){
          alert(ck_box);
        } 
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form name = "frmTest[]" id="fm_submit">
      <input type="checkbox" value="true" checked="true" >
      <input type="checkbox" value="true" checked="true" >
      <input type="checkbox" >
      <input type="checkbox" >
      <input type="submit" id="fm_submit" name="fm_submit" value="Submit">
    </form>
    <div class="container"></div>

    【讨论】:

      【解决方案6】:
      $('#frmTest').submit(function(){
          if(!$('#frmTest input[type="checkbox"]').is(':checked')){
            alert("Please check at least one.");
            return false;
          }
      });
      
      如果至少有一个或多个复选框被选中,

      is(':checked') 将返回 true。

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-07
      • 2013-02-21
      • 2012-04-11
      • 1970-01-01
      • 2015-03-09
      相关资源
      最近更新 更多