是否通过循环选中复选框？

Question

如何通过循环选择复选框？

例如，我有4个复选框，如果选中了第3个复选框，则还选中了第1和2个复选框；如果选中了第4个复选框，则也选中了第1、2和3个复选框。

在jquery、java script或任何其他语言中有任何关于这方面的提示吗？

感谢您的帮助.

HTML代码

<form>
<div>
    <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
    <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
    <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
    <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
    <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>

<div>
    <input type="submit">
</div>

​

Answer 1

尝尝这个

$("input:checkbox").on("click",function(){
    if(this.checked)
    $(this).parent().prevAll().each(function(){
        $("input:checkbox",this).attr("checked",true);
    });
});

要取消选中所有选中的项目，请添加以下代码

if(this.checked==false)
    $(this).parent().each(function(){
         $("input").attr("checked",false);
    });

Answer 2

不知道另一个答案是怎么变得这么受欢迎的。它远非完美，只有在通过单击更改复选框时才会触发。

这里有一个更简单，更具语义的解决方案，甚至不需要一个each()循环，它将工作，而不是checkbox必须是clicked (即通过按键改变它的值)：

$('form').on('change', 'input[type=checkbox]:checked', function(){
    $(this).parent().prevAll('div').find('input[type=checkbox]').prop("checked",true);
});

此on('change')方法仅在选中复选框时触发。然后，它会找到所有以前的分隔符，并通过使用jQuery的prop()方法将其中的任何复选框设置为选中。

。

或者，如果您想同时选中和取消选中：

$('form').on('change', 'input[type=checkbox]', function(){
    $(this).parent().prevAll('div').find('input[type=checkbox]').prop("checked",this.checked);
});

。

Answer 3

你可以用javascript这样做：

if (document.getElementById('id4').checked)

{
document.getElementById('id3').checked = true;
document.getElementById('id2').checked = true;
document.getElementById('id1').checked = true;

}

诸如此类……