jquery选中所有复选框

Question

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

我需要这个jquery允许我按下按钮检查屏幕上的所有内容.如果加载了更多,并按下了按钮,或许可以关闭所有关闭,然后再次按下切换所有重新打开.

这就是我所拥有的,显然它不适合我.

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

按钮是#selectall,复选框是类.tf,它们都驻留在一个父div中#check,在div中调用div #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="Select All">

Answer 1

我知道我正在重新审视一个旧帖子,但是在提出这个问题时,这个页面显示为谷歌的最佳结果之一.我正在重新审视这个,因为在jQuery 1.6及更高版本中,prop()应该用于"checked"状态而不是attr(),传递true或false.更多信息在这里.

例如,Henrick的代码现在应该是:

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

Answer 2

$('#friendslist .tf')

这个选择器将满足您的需求

Answer 3

使用jquery切换功能.然后,您还可以执行您可能要执行的任何其他更改以及这些更改...例如更改按钮的值以说"全部检查"或"取消全部检查".

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

Answer 4

一个非常简单的检查/取消检查所有,无需循环

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3

并且javascript(jQuery)在复选框值上占用"未定义"

**更新 - 使用.prop()**

$("#checkAll").change(function(){
    var status = $(this).is(":checked") ? true : false;
    $(".chk").prop("checked",status);
});

**以前的建议 - 可能无效**

$("#checkAll").change(function(){
    var status = $(this).attr("checked") ? "checked" : false;
    $(".chk").attr("checked",status);
});

或者使用.prop()组合成一行的下一篇文章的建议

$("#checkAll").change(function(){
    $(".chk").attr("checked",$(this).prop("checked"));
});

Answer 5

这就是我切换复选框的方式

$(document).ready(function() {
    $('#Togglebutton').click(function() {
        $('.checkBoxes').each(function() {
            $(this).attr('checked',!$(this).attr('checked'));
        });
    });
});

Answer 6

也许试试这个:

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