Jquery取消選中所有複選框多個表單

我正在嘗試爲用戶構建過濾器，包括選擇/取消選擇所有功能。Jquery取消選中所有複選框多個表單

我已經發現了很多正確的例子，但是沒有一個在演示中有多個過濾器，現在它的行爲很奇怪。

當我點擊（全部）的過濾器1 IT'IS工作正常，但不是（全部）的過濾器2 ...

的jsfiddle：

https://jsfiddle.net/Max06270/pvtqpn8a/#&togetherjs=2tvV3Mhb7l

HTML：

<div id="filter1"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F1 checkboxes --> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
    <input type="submit" id="submit-f1" value="Apply"> 
    </form> 
</div>   
<br> 
<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F2 checkboxes --> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
    <input type="submit" id="submit-f2" value="Apply"> 
    </form> 
</div>

JS：

$("#select-all").change(function() { 
    $(this).siblings().prop('checked', $(':checkbox').prop("checked")); 
});

預先感謝您，最大

來源

2016-08-17 Max06270

您應該使用一個類'選擇-all'而不是ID。 ID的應該是唯一的一個元素。編輯：同樣適用於您的輸入ID;那些應該也是類。 –

您不應該保持相同的ID。對於（全部）複選框。將id更改爲class並使用以下代碼。

$(".select-all").change(function() { 
    $(this).siblings().prop('checked', $(this).prop("checked")); 
});

您總是檢查第一個複選框的道具。其實你只需要檢查點擊複選框的屬性。

來源

2016-08-18 00:22:31

非常感謝。這是完美的答案 – Max06270

ID屬性指定一個元素的唯一的ID，所以你必須使用類是這樣的：

<div id="filter1"> 
    <form action='#'> 
     <input type="checkbox" class="select-all" checked>(All)<br> 
     //.... 
    </form> 
</div>

而且

<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" class="select-all" checked>(All)<br> 
    //... 
    </form> 
</div>

而變化的jQuery這樣的代碼：

$(document).ready(function() { 
    $("#filter2 .select-all, #filter1 .select-all").change(function() { 
     if($(this).is(':checked')) 
      $(this).siblings().prop('checked',true); 
     else 
      $(this).siblings().prop('checked',false); 
    }) 
})

或如下更改：

$(document).ready(function() { 
    $(".select-all").change(function() { 
     $(this).siblings().prop('checked', $(this).prop("checked")); 
    }) 
})

最終代碼：

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
<div id="filter1"> 
 
    <form action='#'> 
 
     <input type="checkbox" class="select-all" checked>(All)<br> 
 
     <!-- Should select/unselect only the F1 checkboxes --> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
 
     <input type="submit" id="submit-f1" value="Apply"> 
 
    </form> 
 
</div> 
 
<br> 
 
<div id="filter2"> 
 
    <form action='#'> 
 
    <input type="checkbox" class="select-all" checked>(All)<br> 
 
    <!-- Should select/unselect only the F2 checkboxes --> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
 
    <input type="submit" id="submit-f2" value="Apply"> 
 
    </form> 
 
</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
$(document).ready(function() { 
 
    $("#filter1 .select-all, #filter2 .select-all").change(function() { 
 
     if($(this).is(':checked')) 
 
      $(this).siblings().prop('checked',true); 
 
     else 
 
      $(this).siblings().prop('checked',false); 
 
    }) 
 
    }) 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-08-18 00:25:56 Ehsan

感謝您的幫助，此解決方案正在開發中。不過，我將使用由Vijendra Kulhade提供的一個。 – Max06270

不用客氣 – Ehsan

Jquery取消選中所有複選框多個表單

回答

相關問題