jQuery使2组单选按钮相互镜像 [英] Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

问题描述

我正在尝试设置两组将同时起作用的单选按钮.换句话说，只要在顶部选中男性"，我便希望在底部自动选择男性". (反之亦然)如果用户向下滚动并单击女性，则应选中顶部的女性.无论用户单击哪个单选按钮，两个单选按钮都应始终检查相同的值.请建议最实用的方法来完成此操作.我的主要重点是Javascript或Jquery，但是我花了几个小时试图提出一些无济于事的方法.请指教.谢谢！ :)

I am trying to setup two sets of radio buttons that will function simultaneously. In other words whenever Male is checked on the top, I would like Male at the bottom to be automatically checked. (and vice versa) If user scrolls down and clicks female then the one at the top should be checked. No matter which radio the user clicks both radio sets should always have the same value checked. Please advise on the most practical way to accomplish this. My main focus is Javascript or Jquery but I have spent several hours trying to come up with something to no avail. Please advise. Thanks! :)

<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>

<div>Random Content</div>

<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>

推荐答案

只需将onclick侦听器添加到两个集合中.像这样:

Just add an onclick listener to both sets. Like this:

document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;

function clickMale(){
  document.getElementById("male1").checked=true;
  document.getElementById("male2").checked=true;
}
function clickFemale(){
  document.getElementById("female1").checked=true;
  document.getElementById("female2").checked=true;
}

并将ID添加到单选按钮("male1"，"male2"，"female1"，"female2")

And add IDs to the radio buttons ("male1", "male2", "female1", "female2")

这篇关于jQuery使2组单选按钮相互镜像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！