使用Jquery设置复选框

Setting checkboxes using Jquery

本文关键字：复选框 设置 Jquery 使用      更新时间：2023-09-26

我有一个动态表单，里面有很多复选框。我想创建一个"全选"方法，点击后会自动检查表单中的所有框。

[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("检查"，true(然而，我对实际元素使用什么$(这个(显然不起作用。。。

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

使用这个简单的代码

$(".checkAll").change(function(){
    $('.checkbox1').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />
<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />

您将#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

演示链接

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

只是为了回答这个问题。我尝试了提供的各种解决方案，但似乎都不起作用。然而，我后来意识到，由于使用Jquery Uniform，我需要添加额外的代码来使显示器正常工作：

这篇文章很有帮助。

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

我的最终代码：

$(document).ready(function(){
    $('#select-all').click(function() {
        if (this.checked)
        {
            $('.checkbox1').prop('checked', true);
        } else {
            $('.checkbox1').prop('checked', false);
        }
        $.uniform.update('.checkbox1');
    });
});
相关文章：