0

当我单击翻转 div 时，我想选择单选按钮 rad1，当我单击翻转 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>

jQuery :-

<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(). 您还有两个});导致错误的额外内容。

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 回答