1

ページに2つの別々のフォームがあり、両方にチェックボックスのグループがあります。

<body>
   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
      </form>
  </body>

ここで必要なのは、ユーザーがform2のチェックボックスをオン/オフにしたら、form1の対応するチェックボックスに対して同じことを実行したいということです。ユーザーがform2で「dog」と「cat」を選択した場合は、form1で同じことを自動的にチェックします。いくつか試しましたが、値フィールドに基づいてチェック済み属性を設定する方法がわかりません。

私にできる最善のことは、すべてのチェックボックスに一意のIDを設定し、IDに基づいて選択/選択解除することです。しかし、私はより良いセレクターの方法があるかどうかを調べようとしています。

また、私がここで試していることを行うためのより良い方法を誰かが私に提案してくれれば嬉しいです。

-まだ試していませんが、これをやろうと思っていました---

   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1[]" id="form1_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form1_Dog" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form1_Cat" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1[]" id="form2_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Cat"  />
      </form>

form2チェックボックスがクリックされたら、値を取得し、form1でチェックボックスを探します。dogが選択されている場合は、$（'＃form1 _'[dog]）。checked（'checked'、checked）をチェックします。

4

3 に答える 3

1

あなたができる

​$('#form1').on('click', 'input:checkbox', function(e) {
    var checked = $(this).is(':checked');
    var val = this.value;
    $('#form2 input:checkbox[value=' + val + ']').prop('checked', checked);
})​​​​​​​​​​​​​​​​​​​​​​​​​​​

ここでフィドルhttp://jsfiddle.net/gpsax/

于 2012-08-21T20:13:07.130 に答える
1

あなたはこれを行うことができます

$('input[type=checkbox]').change(function(){ // <-- bind to all checkboxes
    var $this = $(this);
    var x = $this.index();  // store index
    var $otherForm = $('form').not($this.parent()); // need this to synch other form
    $otherForm.find('input').eq(x).prop('checked',this.checked); // change other forms checkbox accordingly
});​

http://jsfiddle.net/wirey00/ewfrV/

于 2012-08-21T20:17:19.400 に答える
1

片道：

$('#form2 input[type="checkbox"]').change(function() {
    var val = $(this).val();
    $('#form1 [value="' + val + '"]').prop('checked', this.checked);
});

2 つの方法:

$('form input[type="checkbox"]').change(function() {
    var $element = $(this);
    var $form = $element.parent('#form1').length ? $('#form2') : $('#form1');
    var val = $element.val();
    $('[value="' + val + '"]', $form).prop('checked', this.checked);
});

デモ

于 2012-08-21T20:16:09.947 に答える