如果選擇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) 
    });