如何檢查/使用jQuery

Question

我有這樣的HTML代碼

<div class="friends_container"> 
    <div class="friend"> 
     <input type="checkbox" />  
     ... 
    </div> 
<div class="friend"> 
     <input type="checkbox" />  
     ... 
    </div> 
<div class="friend"> 
     <input type="checkbox" />  
     ... 
    </div> 
</div> 

與選擇所有取消選中所有checkboxs /取消選擇所有鏈接

<a id="selectall" href="#" >select all</a> 

我試圖使它的工作，但我失敗..任何幫助？

的jsfiddle Here

Answer 1

您可以使用jQuery .prop()爲此目的的方法。

$(function() { 
    var $checkboxes = $('.friends_container>.friend>input:checkbox'); 
    $('#selectall').on('click', function(e) { 
     e.preventDefault(); 
     $(this).toggleClass('selected'); 
     $checkboxes.prop('checked', function() { 
      return !this.checked; 
     }); 
    }); 
}); 

DEMO

Answer 2

//checkall 
$('#selectall').on('click', function (e) { 
    $('input[type="checkbox"]').prop('checked', true); 
    e.preventDefault(); 
}); 
//uncheck all 
$('#unselectall').on('click', function (e) { 
    $('input[type="checkbox"]').prop('checked', false); 
    e.preventDefault(); 
}); 

Answer 3

改變你鏈接複選框，它會很容易

試試這個

<input id="selectall" type="checkbox" />select all 

JS

$('#selectall').click(function(){ 
    $('.friend').find('input:checkbox').prop('checked',this.checked); 
}) 

fiddle here

---

與a鏈接

$('#selectall').click(function(){ 
    $('.friend').find('input:checkbox').prop('checked',true); 
}) 

再創建一個鏈接，取消選擇複選框

Answer 4

要檢查 -

$("input[type='checkbox']").prop('checked', true);

要取消 -

$("input[type='checkbox']").prop('checked', false);

做它用錨 -

$("#selectall").click(function(){ 
    $("input[type='checkbox']").prop('checked', true); 
}); 

而且還如果你有一些錨取消 -

<a id="deselectall" href="#" >deselect all</a>

您可以添加取消所有監聽器它 -

$("#deselectall").click(function(){ 
    $("input[type='checkbox']").prop('checked', false); 
}); 

Answer 5

$('#selectall').click(function(e){ 
    e.preventDefault(); 
    $('input[type="checkbox"]').prop('checked',this.checked); 
}); 

Answer 6

jQuery的version 1.6 +使用prop

$("#input[type='checked']").prop('checked',true); 

jQuery的version 1.6 -使用attr

$("#input[type='checked']").attr('checked','checked'); 

或

$("#input[type='checked']").attr('checked',true);