时间戳

首页 > 解决方案 > 检查和取消选中单选按钮

jquery - 检查和取消选中单选按钮

问题描述

有没有办法检查顶行的单选按钮然后取消选中所有底部的单选按钮，反之亦然？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>

标签： jqueryhtmltwitter-bootstrapradio-button

解决方案

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

这通过将事件绑定到所有单选按钮的change事件来工作。此事件将检查单选按钮是否正在更改为checked，如果是，它将在正文中搜索具有相同name属性的所有其他单选按钮，并checked使用 将其属性更改为 false .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>

推荐阅读