jquery使2组单选按钮相互镜像

Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

本文关键字：镜像 单选按钮 2组 jquery      更新时间：2023-09-26

我正在尝试设置两组同时起作用的单选按钮。 换句话说，每当在顶部检查男性时，我希望自动检查底部的男性。 (反之亦然( 如果用户向下滚动并单击女性，则应检查顶部的那个。 无论用户单击哪个无线电，两个无线电集都应始终选中相同的值。 请告知最实用的方法来实现此目的。 我的主要重点是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>

附加到 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(性别????(开头，并将其 checked 属性设置为与当前相同的值。

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

演示 - 更改一组中的单选按钮。

编辑

我刚刚注意到..我正在使用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 更改集合中的单选按钮。

只需向两个集合添加一个 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 添加到单选按钮("男性 1"、"男性 2"、"女性 1"、"女性 2"(

既然你提到了它，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，但是如果你在其他地方使用它，最好保持一致。

为

男性/女性输入共享一个类可能是有意义的，例如"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'(，这意味着你的服务器接收两个不同的参数吗？如果为两个单选按钮组指定相同的名称，则只有最后一个按钮的值将被发送到服务器，无论如何，如果您仍然镜像单选按钮，这并不重要。

演示

只需更改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>
相关文章：