Question

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

我需要这个jquery允许我按下按钮时检查屏幕上的所有内容。如果加载了更多，并按下了按钮，可能会关闭所有关闭，然后再次按下以切换所有关闭。

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

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

按钮为#selectall，复选框为类.tf，它们都位于名为#check的父div中，位于名为#friend的div中，位于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

我知道我正在重新审视一个旧帖子，但在提出此问题时，此页面会显示为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);
        }
    );
});

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

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

});

Answer 8

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

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

而不是

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

如上所述。

请参阅jQuery receiving checkbox status

Answer 9

假设#selectall是一个复选框本身，其状态是否要复制到所有其他复选框？

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

Answer 10

试试这个

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”）;

Answer 11

你可以试试这个：

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

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

Answer 12

只需将this.checked更改为“已检查”，它对我（IE，Safari，Firefox）有效。

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

Answer 13

以下是我如何实现它。

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

以下内容触发了上述行。

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

点击chkPrint后，网格中的每个复选框都会显示divSrchResults＆＃39;根据chkPrint的状态，选中或取消选中。

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

Answer 14

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

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

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

Answer 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/

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

Answer 17

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

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

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

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

Answer 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();
});

jquery选中所有复选框

19 个答案: