单击div容器时使用jquery选择单选按钮

当我点击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>

经验

使两个单选按钮具有相同的名称。应该能解决你的问题。然后您也不需要任何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>

体验

使用一个
文档。准备好
并摆脱第n个
。
也可以使用
prop（）
。您还有两个额外的
}）


无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>


经验

为什么是两个document.ready？？？您需要什么
：nth（）
选择器？如果您尝试使用复选框功能，请使用复选框。否则，只需删除javascript，单击标签将选中单选按钮。我添加了它，因为有两个单击事件。这会破坏编码吗？您发布的代码中有2个语法错误，另外2个
}
。当您使用
标签
和
作为属性时，为什么要附加单击处理程序？为什么不使用类似的
name
属性来创建无线组？重新发明轮子？你说的“名字”是指“身份证”吗？如果你的意思是ID，你的意思是建议OP把它们改成类，因为不可能有两个ID命名相同吗？你的答案是“divs”。你是说“无线电输入”吗？另外，你能解释一下OP在没有jQuery的情况下是如何做到这一点的吗？对不起，是的，我指的是单选按钮。如果单选按钮具有相同的“名称”，那么无论何时选择一个，它都会自动取消选择另一个，而不需要任何javascript。这就是它们的工作原理。谢谢，道具方法非常有效。我是jquery新手，我使用以下教程。我认为第n个函数不能正常工作。无论如何，再次感谢您节省了我的时间，请使用一个ready函数。这只是一个问题，它创建了一个已经存在于HTML中的功能，而根本不需要javascript？好的，但我的div标记宽度约为600px。我需要选择单选按钮，不仅是当我按下它们或它们的标签时，而且是在div标签上的任何地方。@adeneo虽然这是真的，但在OP学习的过程中，这一总体思路可以应用于其他情况。完全不需要否决它。@user2451588-使用标签标签而不是div，你可以按照你所知道的任何方式设置它的样式！
<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>

$(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
    });
});

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