0

Flip div をクリックしたときにラジオ ボタン rad1 を選択し、flip2 div をクリックしたときに rad2 ボタンを選択したいと考えていました。これが私が使用したjqueryコードです。問題は、このコードが最初のクリックイベントで機能することですが、続行するとラジオボタンが選択されません。コードの何が問題になっていますか?

HTML :-

<div id="flip" style="width:600px;">
       <input type="radio" name="rad1" value="stat" id="exprad"> 
       <label for="exprad" >Experience</label><br>
</div>
<div id="flip2" style="width:600px;>
      <input type="radio" name="rad2" value="fin-maths" id="perrad">
     <label for="perrad">Personal</label><br>
</div>

Jクエリ:-

<script > 
$(document).ready(function(){
  $("#flip").click(function(){//when click on flip radio button
        $('input:radio[name=rad1]:nth(0)').attr('checked',true);
        $('input:radio[name=rad2]').attr('checked',false);
        });
  });
});

$(document).ready(function(){
    $("#flip2").click(function(){

        $('input:radio[name=rad2]:nth(1)').attr('checked',true);//select radio button second
        $('input:radio[name=rad1]').attr('checked',false);//deselect radioi button first


        });
    });
});
</script>

編集されたコード

 <script > 
    $(document).ready(function(){
      $("#flip").click(function(){//when click on flip radio button
            $('input:radio[name=rad1]:nth(0)').attr('checked',true);
            $('input:radio[name=rad2]').attr('checked',false);
            });
       });

    $(document).ready(function(){
        $("#flip2").click(function(){

            $('input:radio[name=rad2]:nth(1)').attr('checked',true);//select radio button second
            $('input:radio[name=rad1]').attr('checked',false);//deselect radioi button first

        });
    });
    </script>
4

2 に答える 2

1

シングルdocument.readyを使用して、を取り除きnthます。も使用しますprop()。});また、エラーの原因となった2 つの余分なものがあります。

jsfiddle

$(document).ready(function () {
    $("#flip").click(function () { //when click on flip radio button
        $('input:radio[name=rad1]').prop('checked', true);
        $('input:radio[name=rad2]').prop('checked', false);
    });

    $("#flip2").click(function () {
        $('input:radio[name=rad2]').prop('checked', true); //select radio button second
        $('input:radio[name=rad1]').prop('checked', false); //deselect radioi button first
    });
});

JavaScript オプションなし

<label for="exprad" style="width:600px;">
       <input type="radio" name="rad1" value="stat" id="exprad"> 
       Experience<br/>
</label>
<label for="perrad"style="width:600px;>
     <input type="radio" name="rad2" value="fin-maths" id="perrad">
     Personal<br/>
</label>
于 2013-06-06T14:24:08.277 に答える
0

両方のラジオ ボタンに同じ名前を付けます。あなたの問題を解決する必要があります。また、jQuery も必要ありません。

<div id="flip" style="width:600px;"><input type="radio" name="rad1" value="stat" id="exprad"> <label for="exprad" >Experience</label><br></div> 
<div id="flip2" style="width:600px;><input type="radio" name="rad1" value="fin-maths" id="perrad"><label for="perrad">Personal</label><br></div>
于 2013-06-06T14:21:05.330 に答える