如何取消選擇「全部」選擇​​器如果一個輸入被取消選擇

Question

我有一個搜索過濾器，如果選中，將會切換所有過濾器。我的問題是，如果您取消選擇全部或一個過濾器，全部按鈕仍然保持打開狀態。我怎樣才能做到這一點，如果一個過濾器或所有的過濾器被取消選中，全部按鈕將自動地自己決定。

function togglecheckboxes(master,group){ 
 
     var cbarray = document.getElementsByClassName(group); 
 
     for(var i = 0; i < cbarray.length; i++){ 
 
      var cb = document.getElementById(cbarray[i].id); 
 
      cb.checked = master.checked; 
 
     } 
 
    }

#search_attributes { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    padding-top: 5.5em; 
 
    padding-left: 1em; 
 
} 
 

 
input[type=checkbox] { 
 
    display:none; 
 
} 
 

 
input[type=checkbox] + label { 
 
    background: none; 
 
    height: 50px; 
 
    width: 72px; 
 
    display:inline-block; 
 
    cursor: pointer; 
 
    padding: 0 0 0 0px; 
 
    filter: grayscale(1); 
 
    -o-filter: grayscale(1); 
 
    -ms-filter: grayscale(1); 
 
    -moz-filter: grayscale(1); 
 
    -webkit-filter: grayscale(1); 
 
} 
 
    
 
input[type=checkbox]:checked + label { 
 
    background: none; 
 
    height: 50px; 
 
    width: 72px; 
 
    display:inline-block; 
 
    cursor: pointer; 
 
    padding: 0 0 0 0px; 
 
    filter: grayscale(0); 
 
    -o-filter: grayscale(0); 
 
    -ms-filter: grayscale(0); 
 
    -moz-filter: grayscale(0); 
 
    -webkit-filter: grayscale(0); 
 
    -o-transition:.1s; 
 
    -ms-transition:.1s; 
 
    -moz-transition:.1s; 
 
    -webkit-transition:.1s; 
 
}

<div id="search_attributes"> 
 
      <section> 
 
       <input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1"> 
 
       <label for="cb1_1"> 
 
        <img src="images/oneshot_selector.png" /> 
 
       </label> 
 
       <input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2"> 
 
       <label for="cb1_2"> 
 
        <img src="images/loop_selector.png" /> 
 
       </label> 
 
      </section> 
 
      <section> 
 
       <input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"> 
 
       <label class="all" for="cbgroup1_master"> 
 
        <img src="images/all_selector.png" /> 
 
       </label> 
 
      </section> 
 
      <section> 
 
       <input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3"> 
 
       <label for="cb1_3"> 
 
        <img src="images/sfx_selector.png" /> 
 
       </label> 
 
       <input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4"> 
 
       <label for="cb1_4"> 
 
        <img src="images/music_selector.png" /> 
 
       </label> 
 
      </section> 
 
     </div>

Answer 1

簡單！你的目標是改變基於以下主...

• 如果複選框未選中，確保主是選中太
• 否則，確保所有複選框被選中被選中的主人面前

轉換爲jQuery的：

$(".cbgroup1").on("change", function() { 

    var $checkbox = $(this), 
     $checkboxes = $("#search_attributes").find(".cbgroup1"), 
     $master = $("#cbgroup1_master"); 

    if (!$checkbox.is(":checked")) { 
     $master.prop("checked", false); 

    } else { 
     if ($checkboxes.length === $checkboxes.filter(":checked").length) { 
      $master.prop("checked", true); 
     } 
    } 

}); 

的jsfiddle：http://jsfiddle.net/6rc9p0qm/

完成！

Answer 2

我真的沒有看到任何的jQuery在這裏，但既然你有標籤，我將用它！

首先，我們可以稍微改變HTML：

<input type="checkbox" id="cbgroup1_master" data-group="cbgroup1"> 

然後我們可以移動到綁定的JavaScript（順便說一句，我不建議你把你的函數定義在準備功能，但只是保持代碼在一起）：

$(document).ready(function() { 
    function togglecheckboxes() { 
     var $this = $(this); 

     $('.'+ $this.data('group')).prop('checked', $this.is(':checked')); 
    } 

    $('#cbgroup1_master').on('change', togglecheckboxes); 
}); 

這將設置關聯組的檢查狀態以匹配父項。現在讓孩子們撤消父母。我們可以稍微改變其結構，以幫助太：

<input type="checkbox" id="cb1_1" class="cbgroup" name="cbg1[]" value="1" data-group="1"> 

然後在準備功能，我們可以綁定到它們與共享類。

$('.cbgroup').on('change', function() { 
    var $this = $(this); 

    if (!$this.is(':checked')) { 
     $('#cbgroup'+ $this.data('group') +'_master').prop('checked', false); 
    } 
}); 

此，在基於數據組，一個cbgroup的變化，這將其父改變爲未選中（如果它最初被選中）的情況下，要知道去哪個父。

由於您的示例中沒有任何jQuery，爲了確保通知您，我將包含以下內容。如果這是給你的「duh」，我很抱歉，:)。

使用jquery，在選擇器（例如$('selector')）中，使用$('.string')將找到所有元素，其中'string'是他們的一類。使用$('#string')將找到'string'爲id的元素。