選擇圍繞選擇所有分區的複選框

Question

我想檢查位於div中的所有複選框，當用戶單擊選擇所有按鈕（也在同一個div）。我想用jQuery來實現這一點。我的HTML代碼如下所示：

<div> 
    <input type='checkbox' name='select_all' /> 
    <input type='checkbox' name='check1' />  
    <input type='checkbox' name='check2' /> 
    <input type='checkbox' name='check3' /> 
</div>  

Answer 1

你也可以這樣做來選擇一個div內的複選框而不是所有複選框： 如果選中全選，它將選中所有複選框，如果取消選中全選，它將取消選中所有選擇框。

http://jsfiddle.net/y7RsB/

$("input[name=select_all]").click(function(){ 
    $(this).parent().find('input:checkbox').prop('checked',$(this).prop("checked") ? true : false); 
});​ 

Answer 2

Here's一個活生生的例子

<div> 
    <input type='checkbox' name='select_all' /> 
    <input type='checkbox' name='check1' />  
    <input type='checkbox' name='check2' /> 
    <input type='checkbox' name='check3' /> 
</div> ​ 

$(document).on('change', '[name="select_all"]', function(){ 
     var $this = $(this); 
     var div = $this.parent(); 
     var ischecked = $this.prop('checked'); 
     div.find(':checkbox').not($this).prop('checked', ischecked); 

}); 

Answer 3

$('input[name=select_all]').click(function(){ 
    $('input[type=checkbox]').attr('checked',true); 
}); 

Answer 4

在加入上一個答案：

$('input[name=select_all]').on('click', function(){ 

    if($(this).prop('checked')) { 
     $('input[type=checkbox]').attr('checked', true); 
    }else{ 
     $('input[type=checkbox]').attr('checked', false); 
    } 
}); 

Answer 5

雖然其他的反應是正確的，我會喜歡添加一些東西：如果HTML頁面中有其他複選框，只需通過類型（複選框）選中複選框，就可以選中與你想要的無關的其他複選框。

最少添加的代碼應該不會影響其他代碼部分，那就是爲複選框指定一個特定的類。例如，如果您的複選框代表的愛好，你加他們hobby_checkbox類：

<div> 
    <input type='checkbox' name='select_all' /> Select all hobbies 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check1' /> Ski 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check2' /> Travel 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check3' /> PC Games 
    <br> 
    <br> 
    <input type='checkbox' class='other_checkbox' name='other_check' /> Subscribe 
</div> 

然後，當你要選擇你要檢查的複選框，選擇只屬於該類的那些你想要的：

$(document).on('change', '[name="select_all"]', function(){ 
     var $this = $(this); 
     var div = $this.parent(); 
     var ischecked = $this.prop('checked'); 
     div.find(':checkbox.hobby_checkbox').prop('checked', ischecked); 

}); 

這樣可以避免檢查不相關的訂閱複選框。

你可以在行動here看到它。