Question

我有两个复选框，必须选中其中一个复选框。我可以看到它是正确的，没有语法错误。应该对我的代码做些什么来检查是否没有选中复选框？

HTML：

<input type="checkbox" value="aa" class="first" name="a"> Yes<br/>
<input type="checkbox" value="bb" class="second" name="b"> No <br/>
<button type="submit">Go!</button>
<p class="error"></p>

JavaScript的：

$('button').on('click',function(){
    if( $(".first:not(:checked)") && $(".second:not(:checked)") ){
        $('.error').text('You must select atleast one!');
    }else
        $('.error').hide();
});

示例：http://jsfiddle.net/ptbTq/

Answer 1

在两个复选框上放置相同的类，您可以执行类似

的操作

if ($(':checkbox.the_class:checked').length > 0) {
  // at least one checkbox is checked
  // ...
}

Answer 2

检查这个小提琴：http://jsfiddle.net/692Dx/

检查代码：

if($('input[type="checkbox"]:checked').length == 0) {
    alert('none checked');   
}

Answer 3

您正在使用不返回布尔值的选择器，这是编写if条件时所需的值。这是你能做的：

$('button').on('click',function() {
    if(!$(".first").is(":checked") && !$(".second").is(":checked")) {
        $('.error').text('You must select atleast one!').show();
    } else {
        $('.error').hide();
    }
});

或者如果您愿意并且认为它可以更具可读性，那么您可以反驳条款：

$('button').on('click',function() {
    if($(".first").is(":checked") || $(".second").is(":checked")) {
        $('.error').hide();
    } else {
        $('.error').text('You must select atleast one!').show();
    }
});

另请注意，在第一种情况下，您需要.show()错误消息，因为您将其隐藏在第二种情况中。

这是一个live demo。

Answer 4

短：

$("input[type=checkbox]").is(":checked")

如果符合以下情况，

会返回true

您的一个复选框 - 来自选择器（"input[type=checkbox]"） - 已选中。

否则返回false

，在你的情况下：

$(".first, .second").is(":checked")

执行至少一个复选框的操作

Answer 5

最好的方法是将您的复选框放在具有唯一ID的div中，以便您可以验证其中的所有复选框，因此您的代码将适用于所有情况。即使稍后在div中添加新的复选框。

<div id="cb">
   <input type="checkbox" value="aa" class="first" name="a" /> Yes<br/>
   <input type="checkbox" value="bb" class="second" name="b" /> No <br/>
   <button type="submit">Go!</button>
   <p class="error"></p>
</div>

你的JQuery：

$('button').click(function() {
    var checked_one = $('div#cb input[type="checkbox"]').is(':checked');

    if (!checked_one )
        $('.error').text('You must select atleast one!');
    else
        $('.error').hide();
});

现场演示可以在这里看到：http://jsfiddle.net/ptbTq/15/

检查是否在jquery中没有选中任何复选框

5 个答案: