数据切换＝“;按钮”;在JavaScript中无法识别引导程序单选按钮

data-toggle="buttons" bootstrap radio button not being recognized in JavaScript

本文关键字：识别 单选按钮 引导程序 JavaScript 数据 按钮      更新时间：2023-09-26

当我单击单选按钮时，我正试图隐藏一个div（#asideform），如果我从主div中删除数据toggle="buttons"（这是样式所需的），它就会起作用，但如果我让它在那里，它就不会起作用。

我在JavaScript代码中表达得正确吗？

HTML:

<div class="btn-group form-group col-xs-6" data-toggle="buttons">
    <label style="float: left; margin-bottom: 0;">Owns 50% +</label>
    <br>
    <label style="margin-top: 1%" class="btn btn-primary active rdio50">
        <input type="radio" name="rdio50" id="foyes" name="foyes" autocomplete="off"  checked> Yes
    </label>
    <label style="margin-top: 1%" class="btn btn-primary rdio50">
        <input type="radio" name="rdio50" id="fono" name="fono" autocomplete="off"> No
    </label>
</div>

JavaScript:

$(function () {
    $("input[name='rdio50']").click(function () {
        if ($("#fono").is(":checked")) {
            $("#asideform").show();
        } else {
            $("#asideform").hide();
        }
    });
});

看看这个例子，我想这就是你的意思。Fiddle

$('.btn-group').click(function() {
   if($('#fono').is(':checked')) { $('#asideform').show(); }
   else{ $('#asideform').hide();}
});

使用data-toggle="buttons"时，您单击的目标是收音机的label，这就是为什么input收音机上的click事件不会激发的原因。

所以，只需使用change事件来观察radio的值，即使单击标签也会触发输入更改，然后它就工作了。

所以，更换

$("input[name='rdio50']").click(function () {...});

带有

$("input[name='rdio50']").change(function () {...});

以下是工作示例：

$(function() {
  $("input[name='rdio50']").change(function() {
    if ($("#fono").is(":checked")) {
      $("#asideform").show();
    } else {
      $("#asideform").hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" />
<div class="btn-group form-group col-xs-6" data-toggle="buttons">
  <label style="float: left; margin-bottom: 0;">Owns 50% +</label>
  <br>
  <label style="margin-top: 1%" class="btn btn-primary active rdio50">
    <input type="radio" name="rdio50" id="foyes" name="foyes" value="yes" autocomplete="off" checked>Yes
  </label>
  <label style="margin-top: 1%" class="btn btn-primary rdio50">
    <input type="radio" name="rdio50" id="fono" name="fono" value="no" autocomplete="off">No
  </label>
</div>
<div id="asideform">
  this is the asideform
</div>

相关文章：