使用JQuery在子複選框的基礎上選擇和取消選擇主複選框

我正在使用JQuery，並且在其中有複選框下方的HTML。我有一個名爲chkSelectAll的主複選框和DIV中的子複選框。使用JQuery在子複選框的基礎上選擇和取消選擇主複選框

<div class="selectallitems"> 
        <div class="selectall"> 
         <asp:CheckBox ID="chkSelectAll" CssClass="selectall-txt" runat="server" /> 
        </div> 
        <div id="divCheckAll"> 
         <div class="selectall"> 
          <asp:CheckBox ID="chkItemLists" CssClass="selectall-txt-1" runat="server" /> 
          <div class="clear"> 
          </div> 
         </div> 
         <br /> 
         <div class="selectall"> 
          <asp:CheckBox ID="chkComponentLinks" CssClass="selectall-txt-1" runat="server" /> 
          <div class="clear"> 
          </div> 
         </div> 
         <br /> 
         <div class="selectall"> 
          <asp:CheckBox ID="chkResourceKeyData" CssClass="selectall-txt-1" runat="server" /></div> 
         <br /> 
        </div> 
       </div>

現在我想，只要用戶選擇chkSelectAll那麼就應該選擇其他所有的複選框，每當用戶取消選擇其中任何一個應該取消chkSelectAll以及如果再次選擇所有三個複選框，然後chkSelectAll也將被選中如果所有三個都沒有選中，那麼主複選框chkSelectAll也將被取消選中。

請建議!!

來源

2011-05-16 Manoj Singh

這是一個優化的，更緊湊的版本。其他人應該工作得很好，但他們一直在不必要地運行選擇器。這裏所有的選擇器都保存在開頭。

var $selectAll=$('#chkSelectAll'), 
    $checks=$('#divCheckAll :checkbox'); 

$selectAll.change(function() { 
    $checks.attr('checked', this.checked); 
}); 

$checks.change(function() { 
    $selectAll.attr('checked', $checks.not(':checked').length==0); 
});

jsFiddle Demo

來源

2011-05-16 07:37:56 kapa

謝謝@bazmegakapa！ – 2011-05-16 07:44:45

對於我的軟件，我用這樣的：

對於主選擇複選框，你可以使用這樣的事情：

$('.selectall-txt-1').change(function() {   
    var checkedAll = $('.selectall-txt-1 :checked').length == $('.selectall-txt-1').length; 
    $('#chkSelectAll').attr('checked', checkedAll);    
});

來源

2011-05-16 07:18:42 enoyhs

感謝@enoyhsm，但這隻會根據主複選框選擇和取消，但是我想，如果用戶取消任何孩子複選框，則主複選框也應該被取消，並如果用戶再次選擇所有三個複選框，則主複選框將自動再次被選中。 – 2011-05-16 07:23:33

更新了答案。必須重新檢查，如果所有語法都OK。但這個想法是正確的。 – enoyhs 2011-05-16 07:27:17

我想出了這一點：

// Master checkbox 
$(".selectall input[type=checkbox]").change(function() { 
    $("#divCheckAll input[type=checkbox]").attr("checked", this.checked); 
}); 

// Child checkboxes 
$("#divCheckAll input[type=checkbox]").change(function() { 
    var isAllChecked = $(".selectall input[type=checkbox]:checked").length == 3; 
    $(".selectall input[type=checkbox]").attr("checked", isAllChecked); 
});

來源

2011-05-16 07:25:12

你在這裏試圖做什麼，因爲這段代碼不適合我。大師複選框代碼是好的兒童複選框什麼 – 2011-05-16 07:36:22

我檢查，如果我們得到3檢查兒童checckboxes。如果爲true，我們檢查masetr chcekbox，如果爲false，我們取消選中主複選框。 – 2011-05-16 07:39:31

@Manu發現錯誤，現在就試試。 – 2011-05-16 07:41:00

這是很像Oleg G.的答案，除了長度沒有硬編碼，我使用removeAttr取消選中，我使用jQuery的漂亮:checkbox選擇：

$.masterCheck = function(master, boxes) { 
    master.change(function() { 
    if (master.is(':checked')) 
     boxes.attr('checked', 'checked') 
    else 
     boxes.removeAttr('checked') 
    }); 

    boxes.change(function() { 
    if (boxes.is(':not(:checked)')) 
     master.removeAttr('checked') 
    else 
     master.attr('checked', 'checked') 
    }); 
}; 

$.masterCheck($('.selectall:checkbox'), $('#divCheckAll:checkbox'));

來源

2011-05-16 07:35:49

使用JQuery在子複選框的基礎上選擇和取消選擇主複選框

回答

相關問題