文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >检查和取消检查单选按钮

问检查和取消检查单选按钮
EN

Stack Overflow用户
提问于 2019-04-15 20:43:29
回答 3查看 37关注 0票数 0

是否有一种方式，当一个单选按钮从顶部行被选中，然后所有底部的不检查，反之亦然？当从底部行选择单选按钮时，所有顶部按钮都被设置为false。

​

代码语言：javascript
复制
<!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
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-04-15 20:51:28

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

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

​

代码语言：javascript
复制
$("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);
  }

});
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-04-15 20:55:18

使用JQuery，这可以通过几行代码来完成。

代码语言：javascript
复制
$('#base-2 input').click(function() {
   $('#base-1 input').prop('checked', false)
})

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

另外，我建议将您的内容从head中移到body中。

希望这能帮上忙！

票数 1
EN

Stack Overflow用户

发布于 2019-04-15 21:16:05

清理完代码后，我将使用两个不同的JavaScript onclick函数来提供所需的结果。在清理代码时，我们需要用唯一的id标识每个单选按钮obj。我们还需要将代码放入html的主体，而不是头部。

代码语言：javascript
复制
            <!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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55696964

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档