Javascript jquery选择所有复选框

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

我需要这个jquery来允许我在屏幕上按下CheckAll时有一个按钮。如果加载了更多内容，并按下按钮，可能会关闭所有内容，然后再次按下按钮将所有内容重新打开

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

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

按钮是

#selectall

，复选框是class

.tf

，它们都位于名为

#check

的父div、名为

#friend

的div、名为

#friendslist

的div中

例如：

<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">

此选择器将满足您的需要

请尝试以下方法：

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

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

所以“checked”是一个蹩脚的属性；在许多浏览器中，它不能按预期工作：-（尝试执行：

$('#friendslist').find(':checkbox')
    .attr('checked', this.checked)
    .attr('defaultChecked', this.checked);

---

我知道设置“defaultChecked”没有任何意义，但请尝试一下，看看是否有帮助。

使用jquery切换功能。然后，您还可以在这些更改的同时执行任何其他更改…例如将按钮的值更改为“全部选中”或“全部取消选中”

它只需将this.checked更改为“checked”，就可以为我（如Safari、Firefox）工作

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

你可以试试这个：

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

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

//checked_status=true/false-视情况而定，或者通过变量设置它

假设

#selectall

是一个复选框本身，您希望将其状态复制到所有其他复选框

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

试试这个

var checkAll = function(){  
var check_all = arguments[0];
var child_class = arguments[1];
if(arguments.length>2){
    var uncheck_all = arguments[2];

    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', true);
    });

    $('#'+uncheck_all).click(function (){
        $('.'+child_class).attr('checked', false);
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;
            }
        });
        if(checkall_checked == true){
            $('#'+check_all).attr('checked', true);
            $('#'+uncheck_all).attr('checked', false);
        }else{
            $('#'+check_all).attr('checked', false);
            $('#'+uncheck_all).attr('checked', true);
        }
    });
}else{
    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', $(this).attr('checked'));
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;                   
            }
        });
        $('#'+check_all).attr('checked', checkall_checked);
    });
}
};

“全部选中”和“全部取消选中”是相同的复选框

checkAll（“checkAll_id”，“child_checkbox_class_name”）

“全部选中”和“全部取消选中”是单独的复选框

---

checkAll（“checkAll_id”、“child_checkbox_class_name”、“uncheckall_id”）；

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

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

---

我知道我正在重新访问一个旧的线程，但是当这个问题被问到时，这个页面显示为Google中最重要的结果之一。我重新访问这个页面是因为在jQuery 1.6和更高版本中，prop（）应该用于“checked”状态，而不是attr（），并传递true或false。更多信息

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

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

---

以下是我是如何做到这一点的

function SelectAllCheckBoxes();
{
$('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked"));
}

下面的命令触发上述行

<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' /> 

单击chkPrint时，网格divSrchResults'中的每个复选框都会被选中或取消选中，具体取决于chkPrint的状态

当然，如果您需要高级功能，如在取消选中其他复选框时取消选中标题复选框，则需要为此编写另一个函数。

Select/disselect All
<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All

Now here are  two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes:

1: All checkboxes have a class of  “checkbox” (<input type=”checkbox” class=”checkbox” />)
function toggleChecked(status) {
$(".checkbox").each( function() {
$(this).attr("checked",status);
})
}

2: All the checkboxes are contained within a div with an arbitary id:

<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

In this case the function would look like this:

function toggleChecked(status) {
$("#checkboxes input").each( function() {
$(this).attr("checked",status);
})

Have fun!

下面是两个版本的toggleChecked函数，具体取决于文档的语义。唯一的区别是列表复选框的jQuery选择器：
1：所有复选框都有一个“checkbox”（）类
功能切换已检查（状态）{
$（“.checkbox”）.each（函数（）{
$（此）.attr（“已检查”，状态）；
})
}
2：所有复选框都包含在具有任意id的div中：
在这种情况下，函数如下所示：
功能切换已检查（状态）{
$（“#复选框输入”）。每个（函数（）{
$（此）.attr（“已检查”，状态）；
})
玩得高兴

全部的
内布拉斯加州
佛罗里达州
$（文档）.ready（函数（）{
$（“输入[type=checkbox].selAllChksInGroup”）。在（“单击.chkAll”，函数（事件）上{
$（this）.parents（'.controlgroup:eq（0）'）.find（':checkbox'）.prop（'checked'，this.checked））；
});
});

一个非常简单的检查/全部取消检查，无需循环

<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

---

**以前的建议-可能不起作用**

$("#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"));
});

---

我无法使用最后一个示例。查询复选框状态的正确方法显然是：

var status = $(this).prop("checked");

而不是

var status = $(this).attr("checked") ? "checked" : false;

如上所述

---

请参见

我创建了一个用于所有项目的函数。这只是初稿，但可能会有帮助：

功能：

function selectAll(wrapperAll, wrapperInputs) {

    var selectAll = wrapperAll.find('input');
    var allInputs = wrapperInputs.find('input');

    console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);

    function checkitems(allInputs) {
        //If all items checked
        if (allInputs.filter(':not(:checked)').length === 0) {
            console.log('Function: checkItems: All items checked');
            selectAll.attr('checked', true);

        } else {
            console.log('Function: checkItems: Else all items checked');
            selectAll.attr('checked', false);
        }
    }

    checkitems(allInputs);
    allInputs.on('change', function () {
        checkitems(allInputs)
    });

    selectAll.on('change', function () {
        if (this.checked) {
            console.log('This checkbox is checked');
            wrapperInputs.find(':checkbox').attr('checked', true);

        } else {
            console.log('This checkbox is NOT checked');
            wrapperInputs.find(':checkbox').attr('checked', false);

        }
    });

}

它接受两个参数，其中输入被包装到其中，您可以这样使用它：

$(function () {

    var wrapperAll = $('.selectallinput');
    var wrapperInputs = $('.inputs');

    selectAll(wrapperAll, wrapperInputs);
});

请参阅演示：

这可能适用于两种情况（选中/未选中）选择所有情况：

$(document).ready(function(){
 $('#selectall').click(function () {
   $("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;});
 });
});

jQuery 1.9+无法使用。重载的

.toggle（）

函数的事件处理功能在该版本中已被删除，这意味着尝试调用

.toggle（函数，函数）

只会切换元素的显示状态

我建议改为这样做：

$(function() {
    var selectAll = $('#selectall');
    selectAll.on('click', function(e) {
        var checked = !(selectAll.data('checked') || false);
        $('#friendslist .tf').prop('checked', checked);
        selectAll.data('checked', checked);
    });
});

---

它使用一个常规的点击事件处理程序，再加上一个数据属性来跟踪“切换”状态，并在每次点击时将其反转。

下面是我编写的一个基本jQuery插件，它选择页面上的所有复选框，除了要用作切换的复选框/元素。当然，可以根据您的需要进行修改：

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

然后只需调用复选框或按钮元素上的函数：

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

当您通过AJAX添加和删除更多复选框时，您可能希望使用此复选框而不是.change（）：

---

你的HTML不正确。

id

s需要每个文档都是唯一的。它看起来仍然很好，但是当你开始查询它时，你会遇到问题。Henrik的答案对我也适用，而且它会切换为选中/未选中。attr（）在我第一次选中时才起作用&未选中selectall.prop（）每次都有效，谢谢！我将复选标记的thingy更改为这个答案，因此它将位于顶部。切换事件从jQuery 1.8开始就不推荐使用。当然，有各种方法可以解决它。我个人使用了一个复选框而不是按钮，并使用以下代码：$（'#selectall'）。单击（function（）{$（'#friendslist.tf'）。prop（'checked'，this.checked）；}）；我喜欢以可重用的方式编写代码，但是，我不喜欢

selectAll

的名称；我选择了

bindSelectAll

。确实，我应该使用更好的名称。如果使用此名称，请确保如果使用的是jQuery 1.9

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

// Check all checkboxes
$(document).on('change', '.check-all', function() {
    $(this).toggleCheckboxes();
});