Question

当我点击一个单选按钮时，我正在尝试隐藏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();
        }
    });
});

Answer 1

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

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

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

Answer 2

使用data-toggle="buttons"时，点击目标是广播的label，这就是为什么click广播中的input广告无法启动的原因。

因此，只需使用change事件即可观看radio值，即使标签点击也会触发输入更改，然后才有效。

所以，替换

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

与

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

以下是工作示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

data-toggle =“buttons”bootstrap单选按钮在JavaScript中无法识别

2 个答案: