使用 jQuery 选择和取消选择一组复选框答案

【问题标题】：Select and Unselect a group of Checkboxes with jQuery使用 jQuery 选择和取消选择一组复选框
【发布时间】：2012-11-21 04:23:10
【问题描述】：

让我们从头开始，但请不要惊慌……是 Jquery 问题 ;-)

我编写了一个 PHP 代码：用户向我们的数据库发送一个查询，表单显示了一组结果，按表格分组，并带有用于选择数据的复选框。

我想知道如何启用 Jquery 代码以使用选择/取消选择复选框运行，以选择/取消选择每个表的数据，即每组结果。

例如，像这个例子http://www.wiseguysonly.com/2010/01/15/select-and-unselect-all-checkboxes-with-jquery/

1：所有复选框都有一个“checkbox”类：input type=”checkbox” class=”checkbox”

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

您能告诉我修改 toggleChecked 函数的最佳方法是什么吗？

调用toggleChecked的第二个参数，用第二个参数值替换“.checkbox”？（我无法找到正确的语法来做到这一点）。

或者有其他方法可以做到吗？

而且，顺便说一句，使用 prop 代替 attr 更好吗？最好的问候。

【问题讨论】：

是的，最好使用 prop()。以下是您的搜索中应该出现的内容：stackoverflow.com/questions/5229023/…
也许我很困惑，但不完全一样，对吧？所有代码示例仅适用于一组复选框。我不知道如何选择某组复选框或#slaves 复选框...
您采用该概念并将其应用于您指定为组的一部分的复选框。

标签： javascript jquery checkbox

【解决方案1】：

<script>
$(document).ready(function() {
    $('#selecctall').click(function(event) {  
        if(this.checked) { 
            $('.checkbox1').each(function() { 
                this.checked = true;           
            });
        }else{
            $('.checkbox1').each(function() { 
                this.checked = false;                   
            });        
        }
    });

});
</script>

In Cakephp code--

<?php   echo $this->Form->input('selecctall',array('id'=>'selecctall','type'=>'checkbox')); ?>

<?php   echo $this->Form->input('massaction',array('class'=>'checkbox1','label'=>'','type'=>'checkbox')); ?>

【讨论】：

【解决方案2】：

好吧，我知道你已经得到了答案，但是……这是我的版本：

$.fn.changeCheckboxesState = function(state){
        if (state === undefined)
            state = true;

        $(this).filter(':checkbox').each(function() {
            $(this).prop('checked', state);
        });

        return this;
    };
$.fn.toggleCheckboxes = function() {

        $(this).filter(':checkbox').each(function() {
            var $this = $(this);

            $this.prop('checked', !$this.prop('checked'))
        });

        return this;
    };

【讨论】：

【解决方案3】：

Example

jQuery.is 在这种情况下真的很有帮助，否则 prop("checked") 将返回一个布尔值（所以无论哪种方式）：

var boxes = $(".checkbox");
boxes.prop("checked", !boxes.prop("checked"));

是的，jQuery.prop 更好。

【讨论】：

$(".checkbox").prop("checked",boolean) 似乎更好
由于选择器上下文，您的示例无法正常工作。这可以正常工作：jsfiddle.net/FcsvJ/3

【解决方案4】：

只需在函数中添加第二个参数，然后使用它。

function toggleChecked(status,selector) {
    $(selector).each(......);
}

如果你真的在为这么简单的事情苦苦挣扎，那么你真的不应该使用 jQuery。您应该首先了解纯 JavaScript。否则，这就像带着世界上最好的工具去建筑工地，甚至可能知道如何完美地使用这些工具......但不知道基本建筑是如何运作的，你可能会建造一座没有地基的漂亮建筑一天之内就会崩溃。

【讨论】：