0

一緒に行くチェックボックスのリストがあります。1 つは名前用で、もう 1 つは価格用です。価格を確認する必要があり、対応する名前が自動的に確認されます。

これが私のコードです：

<input id="name1" name="name1" value="Option Name 1" type="checkbox">
<input id="price1" name="price1" value="125" type="checkbox">Option Name 1<br>

<input id="name2" name="name2" value="Option Name 2" type="checkbox">
<input id="price2" name="price2" value="150" type="checkbox">Option Name 2<br>

<input id="name3" name="name3" value="Option Name 3" type="checkbox">
<input id="price3" name="price3" value="175" type="checkbox">Option Name 3<br>

javascriptでこれを行うにはどうすればよいですか？1セットだけならできるのですが、それぞれに別の機能を作らないとどうしたらいいのかわかりません。このチェック ボックスのリストは、PHP で動的に作成されるため、選択されたデータベース内の項目に応じて多かれ少なかれ存在します。

4

4 に答える 4

2

おそらくこのようなものですか？

簡単に検出できるように、クラスnameとチェックボックスを追加します。priceまた、動的に追加しているため、イベント委任を使用します

$(document).on('change','.name, .price', function () { //provide a container selector instead of document.
    $(this).next('br').prevAll(':eq(1),:eq(0)').prop('checked', this.checked);
});

フィドル

マークアップに別のクラスを追加したくない場合は、startswith セレクターを使用し、双方向に切り替えます。

$(document).on('change',':checkbox[id^=name],:checkbox[id^=price]', function () { //provide a container selector instead of document.
    $(this).nextUntil('br').andSelf().prev().andSelf().prop('checked', this.checked);
});

フィドル

これは、次に利用可能なbrを選択するだけです

于 2013-06-28T20:32:42.977 に答える
0

価格入力に「価格」などのクラスを与え、名前入力に「名前」などのクラスを与えます。

次に、クラスセレクターを使用してイベントをバインドし、next('.price')またはを使用して対応するチェックボックスを見つけます。previous('.name')

于 2013-06-28T20:29:50.280 に答える
0

各入力にクラスを追加すると、そこから簡単になります。

$(document).ready(function() {
    $(".name").change(function(){
        if($(this).is(":checked")){
             $(this).next().attr("checked","checked");   
        }else{
             $(this).next().removeAttr("checked");   
        }
    })
});

チェックアウト jsfiddle: http://jsfiddle.net/megarameno/BSYvE/

于 2013-06-28T20:29:52.577 に答える
0

もう使用しないでください<br>。代わりに、それらを div で囲みます。そうすれば、それらは DOM グループとして認識され、JS はインテリジェントになります。大量のイベント ハンドラーは必要ありません。

この例では、jQuery: http://jsfiddle.net/Nu8w9/2/を使用しています。どちらの方法でも行全体をチェックしますが、これはあなたが望むものだと思います。あなたの質問を文字通り解釈すると、それはただ$('.row').on('change input:nth-child(2)', function (e) { $(e.target).closest('.row').find('input:nth-child(1)')[0].checked = e.target.checked; });

于 2013-06-28T20:41:02.133 に答える