在 JavaScript 中无法识别 data-toggle="buttons" 引导单选按钮答案

【问题标题】：data-toggle="buttons" bootstrap radio button not being recognized in JavaScript在 JavaScript 中无法识别 data-toggle="buttons" 引导单选按钮
【发布时间】：2016-05-10 11:53:09
【问题描述】：

当我单击单选按钮时，我试图隐藏一个 div(#asideform)，如果我从中删除 data-toggle="buttons"主 div（样式需要它），但如果我放在那里就不行。

我在 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();
        }
    });
});

【问题讨论】：

如果您从引导程序加载演示脚本到您的页面，并将data-toggle 属性设置为button 作为其值，那么该演示脚本将绑定一个函数。跨度>
如果你想要一个按钮样式的元素，只需将btn btn-primary或btn btn-default（或其他样式）添加到元素的类中。

标签： javascript html twitter-bootstrap

【解决方案1】：

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

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

   else{ $('#asideform').hide();}
});

【讨论】：

【解决方案2】：

当使用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>

【讨论】：

感谢您的回答，但 Alberto 的回答解决了我的问题。
:) 弄清楚它为什么不起作用也很重要。