2

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

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

4

5 回答 5

2

尝试这个

$("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

于 2013-05-24T07:48:15.017 回答
1

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

这是一个更简单、更语义化的解决方案，甚至不需要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 演示。

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

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

JSFiddle 演示。

于 2013-05-24T07:56:37.720 回答
0

试试这个：（你不需要遍历复选框）

$('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/

于 2013-05-24T07:59:43.450 回答
0

您可以使用 javascript 这样做：-

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

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

}

等等.....

于 2013-05-24T07:50:39.497 回答
0

试试这个，检查和取消选中：

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

小提琴

于 2013-05-24T08:02:09.020 回答