检查和取消选中单选按钮答案

【问题标题】：checking and unchecking radio buttons检查和取消选中单选按钮
【发布时间】：2019-09-05 21:28:44
【问题描述】：

有没有办法在选中顶行的单选按钮然后取消选中所有底部的单选按钮，反之亦然？ When the a radio button from the bottom row is selected then all the top ones are set to false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="base-1">
        Forward
        <form name="group_A" style="margin-top:5px">
            <input value="0" type="radio" name="button" checked/>
            <span> 0 &nbsp &nbsp</span>
            <input value="1" type="radio" name="button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value="2" type="radio" name="button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value="3" type="radio" name="button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <hr>
    <div id="base-2">
        Backward
        <form name="group_B" style="margin-top:5px">
            <input value="0" type="radio" name="button"/>
            <span> 0 &nbsp &nbsp</span>
            <input value="1" type="radio" name="button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value="2" type="radio" name="button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value="3" type="radio" name="button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
</head>
<body>

</body>
</html>

【问题讨论】：

标签： jquery html twitter-bootstrap radio-button

【解决方案1】：

当然。这可以使用 jQuery 轻松完成。这是一个脚本，它取消选中文档中具有相同name 属性的所有其他单选按钮。

这通过将事件绑定到所有单选按钮的change 事件来实现。此事件将检查单选按钮是否正在更改为checked，如果是，它将在正文中搜索具有相同name 属性的所有其他单选按钮，并使用.prop() 将它们的checked 属性更改为false .

$("input[type=radio]").change(function(){

  if($(this).prop("checked"))
  {
    $("body").find("input[type=radio][name="+$(this).attr("name")+"]").prop("checked", false);
    $(this).prop("checked", true);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id="base-1">
        Forward
        <form name="group_A" style="margin-top:5px">
            <input value="0" type="radio" name="button" checked/>
            <span> 0 &nbsp &nbsp</span>
            <input value="1" type="radio" name="button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value="2" type="radio" name="button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value="3" type="radio" name="button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <hr>
    <div id="base-2">
        Backward
        <form name="group_B" style="margin-top:5px">
            <input value="0" type="radio" name="button"/>
            <span> 0 &nbsp &nbsp</span>
            <input value="1" type="radio" name="button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value="2" type="radio" name="button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value="3" type="radio" name="button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <h3>This one shouldn't change</h3>
    <input type="radio" name="otherbutton">
</body>
</html>

【讨论】：

非常感谢，我有点困惑，因为我读到单选按钮组总是有一个检查。我想我一定是弄错了......
通常会这样做，但您可以使用 javascript/jquery 覆盖默认行为。

【解决方案2】：

使用 JQuery，只需几行代码即可完成。

$('#base-2 input').click(function() {
   $('#base-1 input').prop('checked', false)
})

$('#base-1 input').click(function() {
   $('#base-2 input').prop('checked', false)
})

另外，我建议将您的内容移出head 并移入body

希望有帮助！

【讨论】：

【解决方案3】：

清理完代码后，我将使用两个不同的 JavaScript onclick 函数来提供所需的结果。在代码的清理中，我们需要用唯一的 id 来识别每个单选按钮 obj。我们还需要把代码放到html的body而不是head里。

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>        
            </head>
            <body>
                <div id="base-1">
                    Forward
                    <form name="group_A" style="margin-top:5px">
                        <input value="0" type="radio" id="btnTop0" name="btnTop0"  onclick="uncheckBottom()" checked />
                        <span> 0 &nbsp &nbsp</span>
                        <input value="1" type="radio" id="btnTop1" name="btnTop1"  onclick="uncheckBottom()" />
                        <span> 1 &nbsp &nbsp</span>
                        <input value="2" type="radio" id="btnTop2" name="btnTop2"  onclick="uncheckBottom()"  />
                        <span> 2 &nbsp &nbsp</span>
                        <input value="3" type="radio" id="btnTop3" name="btnTop3"   onclick="uncheckBottom()" />
                        <span> 3 &nbsp &nbsp</span>
                    </form>
                </div>
                <hr>
                <div id="base-2">
                    Backward
                    <form name="group_B" style="margin-top:5px">
                        <input value="0" type="radio" id="btnBottom0" name="btnBottom0" onclick="uncheckTop()"/>
                        <span> 0 &nbsp &nbsp</span>
                        <input value="1" type="radio" id="btnBottom1" name="btnBottom1" onclick="uncheckTop()"/>
                        <span> 1 &nbsp &nbsp</span>
                        <input value="2" type="radio" id="btnBottom2" name="btnBottom2" onclick="uncheckTop()"/>
                        <span> 2 &nbsp &nbsp</span>
                        <input value="3" type="radio" id="btnBottom3" name="btnBottom3" onclick="uncheckTop()"/>
                        <span> 3 &nbsp &nbsp</span>
                    </form>
                </div>

            <script>
             function uncheckBottom(){
                  document.getElementById("btnBottom0").checked = false;
                  document.getElementById("btnBottom1").checked = false;
                  document.getElementById("btnBottom2").checked = false;
                  document.getElementById("btnBottom3").checked = false;
             }

             function uncheckTop(){
                  document.getElementById("btnTop0").checked = false;
                  document.getElementById("btnTop1").checked = false;
                  document.getElementById("btnTop2").checked = false;
                  document.getElementById("btnTop3").checked = false;
             }
        </script>

        </body>
        </html>

【讨论】：

谢谢！我希望我能接受所有三个答案。非常感谢您的帮助！
很高兴能提供帮助。请记住，如果您使用 jquery，则需要通过 CDN 或本地引用 jquery 库。 w3schools.com/jquery/jquery_get_started.asp