Question

我有七个复选框，如下所示。我想做三件事情如下：
1）当'任意'复选框被'检查'时，剩下的'1-6'应该是'未选中'。 2）当'1到6'复选框中的任何一个被'选中'时，'任意'复选框应该'未选中'。 3）如果我'检查'数字然后'取消选中'所有这些数字，那么'任何'复选框应该被'检查'

我能够做1）和2）使用jquery而不是3）。

我无法检查条件是否所有复选框“1 - 6”都是“未选中”。

HTML：

<input name="deal_any" type="checkbox">any

<input name="deal" type="checkbox">1
<input name="deal" type="checkbox">2
<input name="deal" type="checkbox">3
<input name="deal" type="checkbox">4
<input name="deal" type="checkbox">5
<input name="deal" type="checkbox">6

jquery的：

$("input").click(function(){
name=$(this).attr("name");
match = name.match(/any/);
if( match != null)
{
if($(this).is(':checked'))
{
   $('input[name="deal"]').attr('checked', false);
}
}
else
{
if($(this).is(':checked'))
{
   $('input[name="deal_any"]').attr('checked', false);
}
}
});

有人能告诉我这是怎么做到的吗？对不起，如果我的解释不明确。

我将非常感谢您的努力，并提前感谢您的帮助！

Answer 1

你可以这样做

var da = $('input[name="deal_any"]'); // any checkbox
var di = $('input[name=deal]'); // other 6
// when any checkbox changes
da.change(function() {
    // if checked then uncheck all others
    if(this.checked){
        di.prop('checked',false);
    }
});
// when other 6 checkboxes change
di.change(function(){
    // if none are checked then check "deal_any" checkbox - else uncheck
    da.prop('checked',$('input[name=deal]:checked').length === 0);
}).change(); // trigger on page load

http://jsfiddle.net/W8QSW/

你可以像这样把它做成普遍的

var da = $('input.class_one'); // checkbox with name that ends with any
var di = $('input.class_two'); // other checkboxes that don't have any
// when any checkbox changes
da.change(function() {
    // if checked then uncheck all others
    if(this.checked){
        di.prop('checked',false);
    }
});
// when other 6 checkboxes change
di.change(function(){
    // if none are checked then check "deal_any" checkbox - else uncheck
    da.prop('checked',$('input.class_two:checked').length === 0);
}).change(); // trigger on page load

Answer 2

if ($('input[name=deal]:checked').length==0) {

http://jsfiddle.net/mblase75/8MWgj/

Answer 3

这将满足OP列出的所有条件 -

$('input[name="deal"]').change(function() {
    $('input[type="checkbox"]').not($(this)).prop('checked', false);
    if($('input[name="deal"]:checked').length == 0){
        $('input[name="deal_any"]').prop('checked', true);
    } 
});

基于OP希望能够在没有明确名称的情况下重复使用此复选框，他也可以这样做 -

$('input[name="deal"]').change(function() {
    $('input[type="checkbox"]').not($(this)).prop('checked', false);
    if($('input[type="checkbox"]:checked').length == 0){
        $('input[type="checkbox"]').eq(0).prop('checked', true);
    } 
});

检查条件是否所有复选框都“未选中”

3 个答案: