如果选择4个特定复选框，然后取消选择他们，只选择了 “所有项目” 一

Question

现在我有这种形式

<ul> 
<li> 
    <label> 
     <input name="INTERESTS" type="checkbox" value="a" id="all"><span>All items</span> 
    </label> 
</li> 
<li> 
    <label> 
     <input name="INTERESTS" type="checkbox" value="b" id="1"> <span>Item 1</span> 
    </label> 
</li> 
<li> 
    <label> 
     <input name="INTERESTS" type="checkbox" value="c" id="2"> <span>Item 2</span> 
    </label> 
</li> 
<li> 
    <label> 
     <input name="INTERESTS" type="checkbox" value="d" id="3"> <span>Item 3</span> 
    </label> 
</li> 
<li> 
    <label> 
     <input name="INTERESTS" type="checkbox" value="e" id="4"> <span>Item 4</span> 
    </label> 
</li> 
</ul> 

而且这个JavaScript

var $others = $('input[name="INTERESTS"]').not('#all') 
$('#all').change(function() { 
    if (this.checked) { 
     $others.prop('checked', false) 
    } 
}); 
$others.change(function() { 
    if (this.checked) { 
     $('#all').prop('checked', false) 
    } 
}) 

Test it at jsfiddle

如果选中“所有项目”复选框，然后取消选中其他项目。它很好用，但现在如果选择所有项目（项目1到项目4），现在我需要它，然后取消选择它们并仅选择“所有项目”复选框。对此有何想法？

谢谢！

Answer 1

这是怎么回事？

var $others = $('input[name="INTERESTS"]').not('#all') 
$('#all').change(function() { 
    if (this.checked) { 
     $others.prop('checked', false) 
    } 
}); 
$others.change(function() { 
    if (this.checked) { 
     $('#all').prop('checked', false) 

     if($('input[name="INTERESTS"]:checked').not('#all').length == $others.length){ // if checked inputs count equals to the input count 
      $('input[name="INTERESTS"]').not('#all').prop('checked', false); // uncheck except "all" input 
      $('#all').prop('checked', true) // check "all items" 
     } 
    } 
}) 

fiddle result

希望帮助，

Answer 2

var check_box_1 = document.getElementById("1"); 
var check_box_2 = document.getElementById("2"); 
var check_box_3 = document.getElementById("3"); 
var check_box_4 = document.getElementById("4"); 
var check_box_all = document.getElementById("all"); 

function MyFunction(){ 
    if(check_box_1.checked && check_box_2.checked && check_box_3.checked && check_box_4.checked) 
    { 
     check_box_all.checked = true; 

     check_box_1.checked = false; 
     check_box_2.checked = false; 
     check_box_3.checked = false; 
     check_box_4.checked = false; 
    } 
} 

然后，添加

onclick = "MyFunction()" 

你的1，2，3，4，复选框。

Answer 3

将其他复选框单击事件更改为此。

$others.change(function() { 
     $('#all').prop('checked', $('input[name="INTERESTS"]:checked').not('#all').length == $others.length) 
    });