jquery选中所有复选框 [英] jquery select all checkboxes

问题描述

我有一系列复选框，一次通过ajax加载100个。

我需要这个jquery让我按下按钮时检查全部屏幕。如果加载了更多，按下按钮，或者可以切换所有关闭，然后再次按下切换所有重新开启。

这就是我所拥有的，显然它不起作用对我来说。

  $（function（）{
 $（'＃selectall'）。click（function（） {
 $（'＃friendslist'）。find（'：checkbox'）。attr（'checked'，this.checked）; 
}）; 
}）; 
  

按钮是 #selectall ，支票box是 .tf 类，它们都位于名为 #check 的父div中，在一个名为<$的div中c $ c> #friend ，在一个名为的div中#friendslist

示例：

 < div id ='friendslist'> 
< div id ='friend'> 
< div id ='check'> 
< input type ='checkbox'class ='tf'name ='hurr'value ='durr1'> 
< / div> 
< / div> 
< div id ='friend'> 
< div id ='check'> 
< input type ='checkbox'class ='tf'name ='hurr'value ='durr2'> 
< / div> 
< / div> 
< div id ='friend'> 
< div id ='check'> 
< input type ='checkbox'class ='tf'name ='hurr'value ='durr3'> 
< / div> 
< / div> 
< / div> 
 
< input type ='button'id ='selectall'value =全选> 
  

解决方案

我知道我正在重新审视一个旧线程，但是当提出此问题时，此页面会显示为Google中的最佳结果之一。我正在重新审视这个，因为在jQuery 1.6及更高版本中，prop（）应该用于checked状态而不是attr（），传递true或false。更多信息此处。

<例如，Henrick的代码现在应该是：

  $（function（）{
 $（'＃selectall '）。togog（
 function（）{
 $（'＃friendslist .tf'）。prop（'checked'，true）; 
}，
 function（）{ 
 $（'＃friendslist .tf'）。prop（'checked'，false）; 
} 
）; 
}）; 
  

I have a series of checkboxes that are loaded 100 at a time via ajax.

I need this jquery to allow me to have a button when pushed check all on screen. If more are loaded, and the button is pressed, to perhaps toggle all off, then pressed again toggle all back on.

This is what i have, obviously its not working for me.

$(function () {
 $('#selectall').click(function () {
  $('#friendslist').find(':checkbox').attr('checked', this.checked);
 });
});

The button is #selectall, the check boxes are class .tf, and they all reside in a parent div called #check, inside a div called #friend, inside a div called #friendslist

Example:

<div id='friendslist'>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr1'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr2'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr3'>
        </div>
    </div>
</div>

<input type='button' id='selectall' value="Select All">

解决方案

I know I'm revisiting an old thread, but this page shows up as one of the top results in Google when this question is asked. I am revisiting this because in jQuery 1.6 and above, prop() should be used for "checked" status instead of attr() with true or false being passed. More info here.

For example, Henrick's code should now be:

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').prop('checked', true);
        },
        function() {
            $('#friendslist .tf').prop('checked', false);
        }
    );
});

这篇关于jquery选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！