Javascript 通过循环选择复选框？

如何通过循环选择复选框

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

在jquery、java脚本或任何其他语言中对此有任何提示吗

谢谢你的帮助

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>

选择1
选择2
选择3
选择4
备选案文5

试试这个

$("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);
    });

---

您可以使用javascript这样做：-

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

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

}

---

等等……

我不知道另一个答案是如何获得如此广泛的欢迎的。它还远远不够完美，只有通过单击更改复选框时才会触发

这里有一个更简单、语义更丰富的解决方案，甚至不需要

each（）

循环，它可以在不必单击

复选框的情况下工作（即，通过按键更改其值）：

此方法仅在选中复选框时激发。然后，它将查找所有以前的分隔符，并在其中使用jQuery的方法将任何复选框设置为选中


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

$("input:checkbox").on("change",function(){
    ichecked=this.checked;
    $target = ichecked?$(this).parent().prevAll():$(this).parent().nextAll();
    $target.find('input:checkbox').prop("checked",ichecked);
});

.
试试这个：（你不需要循环检查复选框）

演示
-->
尝试使用此选项，以选中和取消选中：

$("input:checkbox").on("change",function(){
    ichecked=this.checked;
    $target = ichecked?$(this).parent().prevAll():$(this).parent().nextAll();
    $target.find('input:checkbox').prop("checked",ichecked);
});

@Pranav我试图通过foreach循环执行此操作，但我显示了选中的复选框数，但没有选择上一个复选框boxes@Mehar只是说你接受的答案质量很差。我不知道它是怎么赢得这么多选票的。考虑这个情况：标签到一个复选框并按空格，用你已经接受的答案，只有一个复选框才会被选中。我的答案没有这个问题，并且涉及的处理更少，因为它不需要不必要的循环：@sachin如果用户取消选中哪怕一个复选框，我想取消选中所有复选框将if（this.checked）更改为if（this.checked==false），并将最后一行更改为$（“input:checkbox”，this）.attr（“checked”，false）@这意味着你只需要1分钟就可以解决这个问题great@Mehar检查更新的和sachin Thnksuse.prop（）而不是.attr（）：）@Mehar。。。是的，试试这个演示
$('input:checkbox').on('change',function(){
    var i = $('input').index(this);
    if(this.checked){
      $("input:lt("+i+")").prop('checked',true);
    }
    else{
      $("input:lt("+i+")").prop('checked',false);
    }
});

$("input:checkbox").on("change",function(){
    ichecked=this.checked;
    $target = ichecked?$(this).parent().prevAll():$(this).parent().nextAll();
    $target.find('input:checkbox').prop("checked",ichecked);
});