Question

有没有办法选中第一行中的单选按钮，然后不选中所有底部的单选按钮，反之亦然？选择最下面一行的单选按钮时，所有最上面的按钮均设置为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>

Answer 1

好的。使用jQuery可以很容易地做到这一点。这是一个脚本，用于取消选中文档中具有相同name属性的所有其他单选按钮。

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

$("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>

Answer 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

希望有帮助！

Answer 3

清理代码后，我将使用两个不同的JavaScript onclick函数来提供所需的结果。在清理代码时，我们需要标识具有唯一ID的每个单选按钮obj。我们还需要将代码放入html主体而不是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>

选中和取消选中单选按钮

3 个答案: