如何檢查jQuery中的div內的所有複選框？

感謝您的答案的傢伙，但它看起來是正確的，它適用於jsfiddle.net，但在我的代碼警報火災很好，但沒有任何反應的複選框。：/

 $('#selectChb').click(function(){ 
     $(':checkbox').prop("checked", true); 
     alert("1"); 
    }); 

    $('#deselectChb').click(function(){ 
     $(':checkbox').prop("checked", false); 
     alert("2"); 
    });

...

<div id="chbDiv" class="ui-widget ui-widget-content ui-corner-all" > <br></br> 
    <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0"> 
    <tr> 
    <td colspan="2">Following:</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1">&nbsp;</label></td> 
    <td width="45" align="center"><img src="face_01.jpg" width="32" height="32"></td> 
    <td>Andrew Lloyd Webber</td> 
    </tr> 
     <tr> 
    <td width="25" align="left"><input type="checkbox" id="check2" /><label for="check2">&nbsp;</label></td> 
    <td width="25" align="center"><img src="face_02.jpg" width="32" height="32"></td> 
    <td>Richard Branson</td> 
    </tr> 
     <tr> 
    <td width="25" align="left"><input type="checkbox" id="check3" /><label for="check3">&nbsp;</label></td> 
    <td width="25" align="center"><img src="face_03.jpg" width="32" height="32"></td> 
    <td>Dmitry Medvedev</td> 
    </tr> 
</table> 
    <br> 
    <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0"> 
    <tr> 
     <td><a href="#" id="selectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Select All</a>&nbsp; 
     <a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    </table> 
<br> 

</div> 
    <br> 
    <div class="ui-widget ui-widget-content ui-corner-all">

來源

2011-06-03 Roger

你正在測試什麼瀏覽器和jQuery版本？ – 2011-06-03 21:10:45

FireFox，最新版本的jQuery，1.6.1 – Roger 2011-06-04 06:53:25

嘗試通過每個項目迭代發現

$（ '＃selectChb'）點擊（函數（）{

alert("c!"); 

    $('#chbDiv').find(':checkbox').each(function(){ 

      $(this).attr('checked', !checkbox.attr('checked')); 

    }); 
});

。

來源

2011-06-03 19:52:15

您可能想要引用這是1.6之前的版本。應該使用'prop（）;'來代替1.6。 – 2011-06-03 19:57:00

此代碼將切換複選框..取消選中是授予href的類。

$('.uncheck').bind('click', function(e) { 

    $(':checkbox').prop('checked', ($(':checkbox').prop('checked')) ? false : true); 

    e.preventDefault(); 

});

來源

2011-06-03 19:54:47 Justin

感謝您的答案，但有點奇怪它不起作用。見上面的編輯。 – Roger 2011-06-03 20:18:59

嘗試以下，

Live Demo

$('#selectChb').click(function(){ 
    $(':checkbox').prop("checked", true); 
});

來源

2011-06-03 19:57:01 Loktar

感謝您的答案，但有點奇怪它不起作用。見上面的編輯。 – Roger 2011-06-03 20:20:45

這是找到一個DIV中所有的複選框，並且檢查或取消選中根據外部的另一單個複選框派生最終溶液DIV表示支票/取消支票

function checkCheckboxes(id, pID){ 

    $('#'+pID).find(':checkbox').each(function(){ 

     jQuery(this).attr('checked', $('#' + id).is(':checked')); 

    });  

}

用法：

<label>check/uncheck 
<input type="checkbox" id="checkall" value="1" 
onclick="checkCheckboxes(this.id, 'mycheckboxesdiv');" > 
</label> 

<div id="mycheckboxesdiv"> 
<input type="checkbox" value="test1" name="test"> 
<input type="checkbox" value="test2" name="anothertest"> 
<input type="checkbox" value="test3" name="tests[]"> 
<input type="checkbox" value="test1" name="tests[]"> 
</div>

好處是你可以使用獨立的複選框組和檢查/從其他組取消所有獨立。它很簡單，不需要使用每個複選框的id或類。

來源

2012-11-13 10:09:54

第一次後，我沒有得到這個工作;重複點擊「checkall」框不會重新選擇所有內容：| – Adam 2014-02-11 20:04:39

試試這個代碼

$("#Div_ID").find('input[type=checkbox]').each(function() { 
      // some staff 
      this.checked = true; 
     });

來源

2014-02-23 08:00:59

-1

嘗試用

 $(':checkbox').attr("checked", true);

道具更換

 $(':checkbox').prop("checked", true);

在某些版本的瀏覽器不支持

來源

2014-08-14 14:26:44 Muyembe

試試這個切換的複選框

var bool = false; 
    $('#selectAll').click(function(e){ 
    $('.users-list :checkbox').prop("checked", bool); 
    bool = !bool; 
});

來源

2015-08-27 12:07:03 user3909162

由於聲譽問題，無法對latis回答發表評論。

類夜已深，但這個工作對我來說（所有學分LATIS）

function checkCheckboxes(id, pID){ 
     $('#'+pID).find(':checkbox').each(function(){ 
      $(this).prop('checked', $('#' + id).is(':checked')); 
     });  
    }

基本上被替換的Attr與道具。

來源

2015-12-05 01:59:01 AJ84

「由於聲譽問題，無法對latis答案發表評論。」如果您只是想發表評論，請不要將其作爲答案發布，請參閱http://meta.stackexchange.com/a/214174/189840。 – 2015-12-05 02:23:27

我有一個包含複選框行的（僞）表，我希望能夠通過單擊進行檢查/取消選中。

爲了達到這個目的，我將ids分配給各行（在循環中用php），並用另一個複選框結束了每一行，我給了類「toggle」，並且該值與封閉行/ div的id相同。

像這樣：

<div class="table"> 
    <div class="row" id="rowId"> 
    <span class="td"><input type="checkbox" name="cb1"></span> 
    <span class="td"><input type="checkbox" name="cb2"></span> 
    <span class="td"><input type="checkbox" name="cbn"></span> 
    <span class="td"><input type="checkbox" class="toggle" value="rowId"></span> 
    </div> 
... 
</div>

然後，我創建了下面的腳本火被點擊此複選框時：

$(".toggle").click(function(){ 
    var id = this.value;   
    if ($(this).attr("checked")) { 
     $(this).attr("checked", false);   
     $('#' + id).find(':checkbox').prop("checked", false); 
    } else { 
     $(this).attr("checked", true); 
     $('#' + id).find(':checkbox').prop("checked", true);    
    }   
});

希望這有助於。

編輯：從腳本中刪除全局並調整檢查行爲。

來源

2017-03-18 17:02:48

如何檢查jQuery中的div內的所有複選框？

回答

相關問題