在复选框组中至少有一个复选框被选中

Have at least on checkbox in checkbox group visually(!) checked

本文关键字:复选框 有一个      更新时间:2023-09-26

我正在寻找一种方法来在一组复选框中至少在复选框上勾选。我唯一能找到的是验证方法,如果至少有一个复选框被选中,但你总是能够选中/取消选中最后一个复选框-是否有一种方法来确保,当用户单击复选框时,至少有一个复选框必须保持选中状态(并且只有当至少两个复选框被选中时,其中一个可以被选中)?

谢谢你的帮助!Vin

复选框'改变'的值,所以可能是最好的监听。记住"click"只会处理鼠标点击,所以你仍然可以改变val/enter或空格键。对于可访问性,我坚持使用onchange.

<标题>小提琴h1> 新小提琴h1> js
$(function () {
    $('.cbClassSegments').on('change', function (e) {
            
        !$(this).siblings(':checked').length &&
            $(this).prop('checked', true) &&
                e.preventDefault();
        // move assignment down and prevent default action 
        cbObjSegments[this.id] = this.checked;
        console.log(valuesTrueInObject(cbObjSegments));
 
    })
})
html

<input type="checkbox" value="1" checked>
<input type="checkbox" value="1">
<input type="checkbox" value="1">

尝试如下:

$('input[type="checkbox"]').click(function(event) {
    var atLeastOneIsChecked = $('input[name="name"]:checked').length;
    if(atLeastOneIsChecked<1){ 
           event.preventDefault();
    }
});

看看这提琴