Question

我正在尝试设置两组同时起作用的单选按钮。换句话说，无论何时在顶部检查男性，我都希望自动检查底部的男性。（反之亦然）如果用户向下滚动并单击女性，则应检查顶部的那个。无论用户点击哪个无线电，两个无线电设备都应始终检查相同的值。请告知最实用的方法。我的主要焦点是Javascript或Jquery，但我花了几个小时试图想出一些无济于事的东西。请指教。谢谢！：）

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

Answer 1

附加到change事件并选择所有其他单选按钮，这些按钮具有name的相同开头并且等于value但不是当前的那个。{1}}。

$("input[name^='sex']").change(function(){
    var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
    $otherRadioButtons.prop('checked', $(this).prop('checked'));
});

以上内容并未使用您可以自行添加的选择器的任何智能缓存。

基本上，每当单选按钮更改其选中的值时，代码将选择具有相同value（男/女）的所有其他单选按钮，这些按钮也以相同的{{1}开头（sex ????）并将其checked属性设置为与当前值相同的值。

我希望这是有道理的。请参阅下面的工作演示。

DEMO - 更改集合中的单选按钮。

修改

我刚注意到..我正在使用jquery 1.3.2并且升级不是一个选项在这一刻。你碰巧没有1.3.2替代品吗？

对于jQuery版本1.3.2，请使用name方法而不是attr方法：

prop

DEMO - 使用jQuery 1.3.2更改集合中的单选按钮。

Answer 2

只需向两个集添加onclick侦听器即可。像这样：

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

Answer 3

既然你提到过，如果你愿意的话，Zove在jQuery中的回答是这样的：

$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);

function clickMale(){
    $("#male1").attr('checked', true);
    $("#male1").attr('checked', true);
}

function clickFemale(){
    $("#female1").attr('checked', true);
    $("#female2").attr('checked', true);
}

你不需要jQuery来做这么简单的事情，但如果你在其他地方使用它，最好保持一致。

Answer 4

分享男性/女性输入的课程可能是有意义的，例如： 'js-male'或'js-female'）。这节省了一些代码。例如，你可以这样做：

   $('.js-male').change(function() {
      $('.js-male').attr('checked', $(this).attr('checked'));
   });

   $('.js-female').change(function() {
     $('.js-female').attr('checked', $(this).attr('checked'));
   });

可能有更优雅的方式来处理整个情况。你真的希望输入有不同的名字（'male'，'male2'），这意味着你的服务器收到两个不同的参数？如果您给两个单选按钮组指定相同的名称，则只会将最后一个的值发送到服务器，无论如何，如果您仍然镜像单选按钮，这并不重要。

Demo

Answer 5

只需更改jQuery源代码的位置，即可开箱即用。

<html>
<head>
    <script src="jquery-1.7.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#male1, #male2").live("click", function(){
                $("#male1").attr("checked", $("#male2").attr("checked"));
                $("#male2").attr("checked", $("#male1").attr("checked"));
            });

            $("#female1, #female2").live("click", function(){
                $("#female1").attr("checked", $("#female2").attr("checked"));
                $("#female2").attr("checked", $("#female1").attr("checked"));
            });
        });
    </script>

</head>
<body>
    <div class="top">
        <input id="male1" type="radio" name="sex" value="Male" /> Male<br />
        <input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
    </div>

    <div>Random Content</div>

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

</html>

Jquery制作2套无线电按钮相互镜像

5 个答案:

DEMO - 更改集合中的单选按钮。

DEMO - 使用jQuery 1.3.2更改集合中的单选按钮。