Jquery 使 2 组单选按钮相互镜像答案

【问题标题】：Jquery to Make 2 Sets of Radio Buttons Mirror EachotherJquery 使 2 组单选按钮相互镜像
【发布时间】：2012-08-28 20:50:48
【问题描述】：

我正在尝试设置两组同时起作用的单选按钮。换句话说，只要在顶部检查雄性时，我都希望自动检查底部的男性。（反之亦然）如果用户向下滚动并单击女性，则应检查顶部的那个。无论用户单击哪个收音机，两个收音机都应始终检查相同的值。请提供最实用的方法来实现这一点。我的主要关注点是 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>

【问题讨论】：

您可以使用 document.getElement_whatever_('the_button_id_classname_or_whatever').checked=true 来检查单选按钮；您是如何花费 HOURS 来解决这个问题的？
其他任务可能需要我几分钟，而我的朋友可能需要你几个小时。 :) 但是，您的解决方案确实适用于这种情况。非常感谢你。 -K

标签： javascript jquery radio-button

【解决方案1】：

附加到change 事件并选择所有其他具有相同name 开头且相同value 但不是当前单选按钮。

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

以上内容没有使用您可以自己添加的选择器的任何巧妙缓存。

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

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

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

编辑

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

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

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

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

【讨论】：

做得非常好。感谢一百万瓦尔先生！
@Nolan：你很受欢迎，很高兴它有帮助。
我刚刚注意到.. 我正在使用 jquery 1.3.2，目前升级不是一个选项。你不会碰巧有 1.3.2 的替代品吗？
@Nolan：没问题，用attr代替prop方法。检查最新编辑。希望这会有所帮助。

【解决方案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”）

【讨论】：

【解决方案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 来做这么简单的事情，但如果你在其他地方使用它，最好保持一致。

【讨论】：

【解决方案4】：

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

   $('.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

【讨论】：

【解决方案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>

【讨论】：

这一个在点击返回顶部男性时似乎效果不佳。演示jsfiddle.net/t2pPT
您的示例默认为 jQuery 1.3.2。将其切换到 1.7.3 或 1.8.0。