通过循环选择复选框

Select the checkboxes through loop?

本文关键字：复选框 选择 循环      更新时间：2023-09-26

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

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

试试这个

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

演示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()方法。

<<p> JSFiddle演示/strong>。

或者，如果你想同时选中和，取消选中:

$('form').on('change', 'input[type=checkbox]', function(){
    $(this).parent().prevAll('div').find('input[type=checkbox]').prop("checked",this.checked);
});
<<p> JSFiddle演示/strong>。

你可以使用javascript:-

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

等.....

试试这个:(你不需要遍历复选框)

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

Demo --> http://jsfiddle.net/eqPG2/

试试这样做，选中和取消选中:

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

小提琴

相关文章：