2

ループを介してチェックボックスを選択するにはどうすればよいですか?

たとえば、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>

4

5 に答える 5

1

他の回答がどのように人気を博したかはわかりません。完璧とはほど遠いもので、チェックボックスをクリックして変更した場合にのみ起動します。

each()これは、ループを必要とせずに、はるかにシンプルでセマンティックなソリューションです。これは、チェックボックスがなくても機能しますclicked(つまり、キーを押して値を変更する必要があります)。

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

このon('change')メソッドは、チェックボックスがチェックされている場合にのみ起動します。prop()次に、以前の仕切りをすべて検索し、jQuery のメソッドを使用してチェックボックスをオンに設定します。

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

Try with this, both to check and uncheck:

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

fiddle

于 2013-05-24T08:02:09.020 に答える
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 に答える