Question

我有一个动态表单，其中包含许多复选框。我想创建一个“全选”方法，点击后自动检查表单中的所有方框。

[x] select all //<input type="checkbox" id="select-all"> Select all

[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">

[submit]

我的jQuery如下：

$(document).ready(function(){
    $('#select-all').click(function() {
        if (this.checked)
        {
        console.log("Check detected");

        $('.checkbox1').each(function() {
            console.log('Checking the item with value:' + this.value );
            $(this).prop('checked', true);
            console.log(this);

        });

    } else {
        console.log("not checked");
    }
});

}）;

我的控制台输出：

> Check detected
> Checking the item with value:1
> <input type="checkbox" id="1" class="checkbox1" value="1">
> Checking the item with value:2
> <input type="checkbox" id="2" class="checkbox1" value="2">

我可以遍历每个项目但是，我不知道如何实际设置复选框以进行检查。

我正在努力的部分是检查状态的实际设置，我知道我需要使用：.prop（'checked'，true）但是，我对实际元素使用了什么？ $（这）显然不起作用......

$(this).prop('checked', true);

Answer 1

使用这个简单的代码

＆＃13;

0x004000A0

＆＃13;

$(".checkAll").change(function(){
    $('.checkbox1').prop('checked', this.checked);
});

＆＃13;

Answer 2

demo link

js代码

$('.checkbox1').click(function(event) {
    var _this = $(this);
    if (!_this.prop('checked')) {
        $('#select-all').prop('checked', false)
    }
})

$('#select-all').click(function() {

    var _this = $(this);
    var _value = _this.prop('checked');
    console.log("Check detected");

    $('.checkbox1').each(function() {
        console.log('Checking the item with value:' + this.value);
        $(this).prop('checked', _value);
        console.log(this);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all

<input type="checkbox" id="1" class="checkbox1" value="1">

<input type="checkbox" id="2" class="checkbox1" value="2">

Answer 3

您将#select-all称为(this.checked)，您需要引用$(this)。

其次，您可以使用:checked查看是否已选中。

第三，你不需要循环$('.checkbox1')。 jquery将匹配所有元素并将更新属性。

以下是可能有帮助的代码段

$(document).ready(function() {
    $('#select-all').click(function() {
        if ($(this).is(":checked")) {
            console.log("Check detected");
            $('.checkbox1').prop('checked', true)
        } else {
            $('.checkbox1').prop('checked', false)
        }
    });
   // If select-all is selected and if one check box is unchecked , 
   //then select-all will be unchecked
    $('.checkbox1').click(function(event) {
        if ($(this).is(':checked')) {
            // #select-all must be checked when all checkbox are checked
        } else {
            if ($('#select-all').is(':checked')) {
                $('#select-all').prop('checked', false)
            }
        }
    })
});

JSFIDDLE

Answer 4

回答这个问题。我尝试了提供的各种解决方案，但它们似乎无法正常工作。然而，我意识到由于使用Jquery Uniform，我需要添加一些额外的代码才能使显示正常工作：

This post很有帮助。

感谢所有花时间回答的人。

我的最终代码：

$(document).ready(function(){
    $('#select-all').click(function() {
        if (this.checked)
        {
            $('.checkbox1').prop('checked', true);

        } else {
            $('.checkbox1').prop('checked', false);
        }
        $.uniform.update('.checkbox1');
    });
});

使用Jquery设置复选框

4 个答案: