Question

这是我的fiddle，它将在页面中选中复选框。

但我想检查具有公共类名的复选框组。

以下是我的Jsfiddle。

我怎样才能做到这一点？

这是我到目前为止的脚本

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all')
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

Answer 1

你应该给同一个类（比如checkall）给那些选中/取消选中组中所有元素的复选框，并且只有一个更改处理程序，它只针对最近p元素的兄弟字段集中的复选框：

$(".checkall").change(function () {
  $(this).closest('p').next().find(':checkbox').prop('checked',  $(this).prop("checked"));
});

<强> Working Demo

Answer 2

$("#checkAll1").change(function () {
    $(".1").prop('checked', $(this).prop("checked"));
});

$("#checkAll2").change(function () {
    $(".2").prop('checked', $(this).prop("checked"));
});

Answer 3

您应该使用jQuery.data()

$(".js-check-group").change(function () {
    var elem = $(this);
    $('.' + elem.data('group')).prop('checked', elem.prop("checked"));
});

演示：http://jsfiddle.net/ScnQT/211/

Answer 4

我想这样：

<input type="checkbox" id="checkAll2" class="checkAll"/>

$(".checkAll").change(function () {
    var myInputs = $(this).closest("form").find("fieldset input:checkbox");
    myInputs.each(function(){
        $(this).prop('checked', !$(this).prop("checked"));
    });
});

这里是小提琴：

http://jsfiddle.net/ScnQT/208/

Answer 5

您只需用您的班级名称替换输入。

$("#checkAll1").change(function () {
    $(".1:checkbox").prop('checked', $(this).prop("checked"));
});

$("#checkAll2").change(function () {
    $(".2:checkbox").prop('checked', $(this).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll1"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="1" /> Option 1</label></p>
<p><label><input type="checkbox" class="1" /> Option 2</label></p>
<p><label><input type="checkbox" class="1" /> Option 3</label></p>      
    </fieldset>
</form>

<form action="#">
    <p><label><input type="checkbox" id="checkAll2"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="2" /> Option 1</label></p>
<p><label><input type="checkbox" class="2" /> Option 2</label></p>
<p><label><input type="checkbox" class="2" /> Option 3</label></p>      
    </fieldset>
</form>

LINK：http://jsfiddle.net/4zpu4m0w/1/

问候。

复选框按名称检查所有内容

5 个答案: