1

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

5 回答 5

4

附加到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（性别????）开头，并将其选中属性设置为与当前一个。

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

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

编辑

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

于 2012-08-28T21:04:17.877 回答
1

只需为这两个集合添加一个 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”）

于 2012-08-28T20:54:28.963 回答
0

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

演示

于 2012-08-28T21:05:42.110 回答
0

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

于 2012-08-28T21:03:57.293 回答
0

只需更改您的 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>
于 2012-08-28T21:25:43.660 回答