jquery选择所有复选框答案

【问题标题】：jquery select all checkboxesjquery选择所有复选框
【发布时间】：2009-12-10 11:16:34
【问题描述】：

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

我需要这个 jquery 来让我在屏幕上按下检查所有按钮时有一个按钮。如果加载了更多，并且按下了按钮，则可能会全部关闭，然后再次按下将全部重新打开。

这就是我所拥有的，显然它不适合我。

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

按钮是#selectall，复选框是类.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">

【问题讨论】：

您的 HTML 不正确。 ids 每个文档都必须是唯一的。它看起来仍然很好，但是当您开始查询它时会遇到问题。

标签： javascript jquery

【解决方案1】：

我知道我正在重新访问一个旧线程，但是当被问到这个问题时，此页面显示为 Google 中的顶级结果之一。我正在重新讨论这一点，因为在 jQuery 1.6 及更高版本中，prop() 应该用于“已检查”状态，而不是 attr() 并传递 true 或 false。更多信息here.

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

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

【讨论】：

attr() 仅在我第一次选中和未选中 selectall 时才起作用。 prop() 每次都有效，谢谢！
我将标记为 thingy 的复选标记更改为此答案，因此它将位于顶部。
从 jQuery 1.8 开始不推荐使用切换事件。当然，有多种方法可以解决它。就个人而言，我使用复选框而不是按钮，以及以下代码： $('#selectall').click(function() { $('#friendslist .tf').prop('checked', this.checked) ; });

【解决方案2】：

$('#friendslist .tf')

此选择器将满足您的需求

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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"));
});

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

也许试试这个：

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

【讨论】：

【解决方案7】：

<div class="control-group">
<input type="checkbox" class="selAllChksInGroup"> All
<input type="checkbox" value="NE"> Nebraska
<input type="checkbox" value="FL"> Florida
</div>


$(document).ready(function(){

$("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function( event ){
    $(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked);
});

});

【讨论】：

谢谢！谢谢！它在打开和关闭多个“切换”时效果很好。非常感谢您的帮助。旧线程，我知道，但你仍然值得感谢！

【解决方案8】：

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

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

而不是

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

如上。

见jQuery receiving checkbox status

【讨论】：

【解决方案9】：

所以“checked”是一个糟糕的属性；在许多浏览器中它不能按预期工作:-( 尝试这样做：

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

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

【讨论】：

【解决方案10】：

只需将您的 this.checked 更改为“已检查”，它就适用于我（IE、Safari、Firefox）。

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

【讨论】：

Henrik 的回答也适用于我，而且它会切换选中/未选中。

【解决方案11】：

你可以试试这个：

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

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

【讨论】：

【解决方案12】：

假设#selectall 是一个复选框，您希望将其状态复制到所有其他复选框？

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

【讨论】：

【解决方案13】：

试试这个

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_checkboxes_class_name");

“选中所有”和“取消选中所有”是单独的复选框

checkAll("checkall_id", "child_checkboxes_class_name", "uncheckall_id");

【讨论】：

【解决方案14】：

这是我实现它的方法。

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

下面会触发上述行。

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

单击 chkPrint 后，网格 divSrchResults' 中的每个复选框都根据 chkPrint 的状态被选中或取消选中。

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

【讨论】：

【解决方案15】：

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

功能：

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);

        }
    });

}

它接受输入被包装到的 2 个参数，您可以像这样使用它：

$(function () {

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

    selectAll(wrapperAll, wrapperInputs);
});

查看演示：http://jsfiddle.net/cHD9z/

【讨论】：

我喜欢代码以可重用的方式编写，但是我不喜欢selectAll 的名称；我选择了bindSelectAll。
没错，我应该用一个更好的名字。如果您使用它，请确保如果您使用的是 jQuery 1.9，则将 .attr('checked', false) 更改为 .prop('checked', false)

【解决方案16】：

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

currently accepted answer 不适用于 jQuery 1.9+。在该版本中删除了（相当严重）重载的 .toggle() 函数的事件处理方面，这意味着尝试调用 .toggle(function, function) 只会切换元素的显示状态。

我建议改为这样做：

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

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

【讨论】：

【解决方案19】：

这是我编写的一个基本 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()：

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

【讨论】：