单选按钮不会检查引导按钮组

Question

我有一个包含表单的引导模式，里面有两个单选样式按钮，它们是基于 example 创建的，用于普通按钮样式的单选选项：

<form id="changePlanForm" action="/change_plan_submit.php" method="post">
    <div class="btn-group-toggle active" data-toggle="buttons">
        <label class="btn btn-outline-info active" for="1">
            <input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
        </label>
        <label class="btn btn-outline-info" for="2">
            <input type="radio" name="cycle" value="2" id="2" autocomplete="off">
        </label> Button 2
    </div>
</form>

但是，在选择无线电选项时，按钮只会出现“活动”，但不会变成“检查”。这在提交表单时得到确认。

我最初尝试按照here 的建议添加一些 JQuery：

<script>
    $('form').click (function() {
        alert("clicked");
        $('form').find("input[name='cycle']:checked").prop('checked', false);
        $(this).find("input[name='cycle']").prop('checked', true);
     });
</script>

但此脚本仅删除当前选中的选中属性，并不会将其应用于新按钮。

我是否遗漏了脚本中的某些内容，或者是否有更简单的方法来创建类似于单选按钮的引导表单按钮？

提前致谢！

-- 更新1--

在进行一些调试后，似乎在单击标签时$(this) 没有被定义，因此没有任何东西可以将选中的属性设置为 true。

还有其他方法可以识别被点击的标签吗？

Answer 1

您可以简单地使用onchange 函数来确定哪个radio 按钮被选中，并使用.val() 获取其值

无需在每次点击时将选中单选按钮的prop 或attr 设置为false 或true。

在下面运行 sn-p 以使用 change 函数查看每次点击时哪个 radio button 是 checked。

$('form').on('change', function() { 
   //Get the checked radio button value
   var getCheckedValue = $('input[name=cycle]:checked').val()
   //console.log
   console.log('Radio ' +getCheckedValue+ ' is checked'); 
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<form id="changePlanForm" action="/change_plan_submit.php" method="post">
  <div class="btn-group-toggle active" data-toggle="buttons">
    <label class="btn btn-outline-info active" for="1">
      <input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
    </label>
    <label class="btn btn-outline-info" for="2">
      <input type="radio" name="cycle" value="2" id="2" autocomplete="off"> Button 2
    </label>
  </div>
</form>

Answer 2

当单击单选按钮（或包含单选按钮的标签）时，它的选中属性会自动更改为 true。您当前的 JQuery 函数在单击时将单击的单选按钮的选中属性设置为 false，因此实际上无法将其设置为 true。

如果您只需要找出单击了哪个单选按钮，则以下 JQuery 代码将起作用：

<script>
    $('form').click (function() {
        alert("clicked");
        let checkedOption = $('form').find("input[name='cycle']:checked");
        //checkedOption contains the radio that was just clicked
        //all other radios with the same 'name' will automatically turn false
     });
</script>