0

次のような1つのWebページに2つのフォームがあります

<tr>
  <td>
    <h4>Team A[Form1]</h4>
    <form name="form1" enctype="multipart/form-data">
     <input type="radio" value="batting" name="teamA" /> Batting<br />
      <input type="radio" value="bowling" name="teamA" /> Bowling<br />
    </form>
  </td>
  <td>
    <h4>Team B[Form2]</h4>
    <form name="form2" enctype="multipart/form-data">
     <input type="radio" value="batting" name="teamB" /> Batting<br />
      <input type="radio" value="bowling" name="teamB" /> Bowling<br />
    </form>
  </td>
 </tr>

form1の選択で2番目のフォームラジオボタンを自動選択する方法。フォーム1でバッティングを選択した場合、フォーム2のボタンをボウリングを選択したものに変更します。

私はのようにしようとしています

<script type="text/javascript">
     if(document.form1.teamA.checked = 'batting') {
         document.form2.teamB.checked = 'bowling';
     }
    </script>
4

4 に答える 4

1

属性を使用dataして、どのフィールドをどのボタンに「接続」するかを定義できます。

<form name="form1" id="form1" enctype="multipart/form-data">
    <input type="radio" value="batting" data-toggle="bowling" name="teamA" />Batting
    <br />
    <input type="radio" value="bowling" data-toggle="batting" name="teamA" />Bowling
    <br />
</form>

JS

$('#form1 :radio').change(function () {
    $('#form2 :radio').filter('.' + $(this).data('toggle')).prop('checked', true);
});

http://jsfiddle.net/hVkmM/

したがって、ある日、値が変更されたり、新しいオプションが追加されたりしても、JavaScript コードは引き続き機能します。

またはこのように：

$('#form1 :radio').change(function () {
    $('#form2 :radio[value="' + $(this).data('toggle') + '"]').prop('checked', true);
});

http://jsfiddle.net/hVkmM/1/

2 番目のフォームでラジオ ボタンをオンにすると、最初のフォームの状態が変化するように、双方向バインディングを作成することもできます。

http://jsfiddle.net/hVkmM/2/

于 2013-03-22T13:09:29.523 に答える
0 
$('form[name="form1"] input[type=radio][name=teamA]').change(function(){
     var radiosFrom2ndForm = $('form[name="form2"] input[type=radio][name=teamB]');
     for(var i = 0; i < radiosFrom2ndForm.length; i++)
          if(radiosFrom2ndForm[i].value !== this.value)
               radiosFrom2ndForm[i].checked = true;
});

フィドル

別：

$('form[name="form1"] input[type=radio][name=teamA]').change(function(){
     $('form[name="form2"] input[type=radio][name=teamB][value!=' + this.value + ']').prop('checked', true);
});

フィドル

于 2013-03-22T13:07:53.260 に答える
0

次のコードを使用

    <script>
    $(document).ready(function(){

$("input[name='teamA']").change(function(){

    if($("input[name='teamA']:checked").val() == "batting")
    {
       $("input:radio[name='teamB'][value='bowling']").attr('checked', 'checked');
    }
    if($("input[name='teamA']:checked").val() == "bowling")
    {
       $("input:radio[name='teamB'][value='batting']").attr('checked', 'checked');
    }

});


});
    </script>

このフィドルを見てくださいhttp://jsfiddle.net/z8Lnd/5/

于 2013-03-22T13:07:56.230 に答える
0

これは以前のバージョンよりもうまく機能するはずです:

$(document).ready(function(){
 $("#form1 input:radio[id='bowling']").prop("click",true);
    $("#form1 input:radio").on("change",function(){
   $("#form2 input:radio[id='bowling']").prop("checked", $("#batting").prop("checked"));
    });
});

http://jsfiddle.net/rMYrj/2/

また、HTML にいくつかの変更を加えて、セレクターで ID を使用できるようにしました。

于 2013-03-22T13:08:39.457 に答える