[jQuery]判斷 checkbox 是否選取，實現全選跟全部取消

在 jQuery 底下要如何實現這個功能，其實還蠻簡單的，首先看 html 部份

<input name="user_active_col[]" type="checkbox" value="1"> 1
<input name="user_active_col[]" type="checkbox" value="2"> 2
<input name="user_active_col[]" type="checkbox" value="3"> 3
<input name="user_active_col[]" type="checkbox" value="4"> 4
<input name="user_active_col[]" type="checkbox" value="5"> 5
<input name="clickAll" id="clickAll" type="checkbox"> 全選

jQuery 部份如下：

$("#clickAll").click(function() {
   if($("#clickAll").prop("checked")) {
     $("input[name='user_active_col[]']").each(function() {
         $(this).prop("checked", true);
     });
   } else {
     $("input[name='user_active_col[]']").each(function() {
         $(this).prop("checked", false);
     });           
   }
});

可以不用 loop 方式，直接用一行解取代上面程式碼

$("input[name='user_active_col[]']").prop("checked", true);

Related View

  • NK

    我覺得判斷式可以縮短成這樣，給你參考看看~
    var IsChk = ($(“#clickAll”).attr(“checked”));
    $(“input[@name=’user_active_col[]’]”).each(function(){$(this).attr(“checked”, IsChk);});

  • 樓上解法不錯，簡短許多

  • 感覺很實用！但是現在都1.8.3版了…

  • appleboy48

    Yes, 現在的版本請改用 prop 的方式取代 attr 了。

  • 過客

    爲何要用 .each(…) ？
    直接設定全部checkbox 不可以嗎？
    $(“input[name=’user_active_col[]’]”).prop(“checked”, true);

  • 湯包

    var ck = $(“input[name=’ckAll’]”).prop(“checked”);
    $(“input[name=’user_ck[]’]”).prop(“checked”,ck);
    這樣0.0