Question

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

例如我有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>

Answer 1

试试这个

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

DEMO

要取消选中所有已检查的代码，请在下面添加以下代码

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

<强> DEMO 2

Answer 2

不确定其他答案是如何获得如此受欢迎的。它远非完美，只有通过点击更改复选框时才会触发。

这是一个更简单，更语义的解决方案，甚至不需要each()循环，这将在没有复选框必须clicked的情况下工作（即通过按键更改其值）：

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

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

JSFiddle Demo

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

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

JSFiddle demo

Answer 3

您可以使用javascript这样做： -

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

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

}

依旧.....

Answer 4

试试这个:( 你不需要循环复选框）

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

演示--> http://jsfiddle.net/eqPG2/

Answer 5

尝试使用它，检查和取消选中：

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

fiddle

选择循环复选框？

5 个答案: