jquery - 单击 Bootstrap 中的单选按钮时如何显示/隐藏文本

Question

我有 2 个单选按钮，用于选择单位(厘米/英尺)。如果我选择“cm”，文本将更改为 cm。

单击 Bootstrap 中的单选按钮时如何显示/隐藏文本

这是我的示例代码

https://jsfiddle.net/A8Znx/42

<style>
body {
    padding:50px;
}
.btn-select { border:1px solid #333 }
.btn-select.active { background:#999}
</style>

<div class="unit done">
  <input type="text" id="" name="" class="input1" value="" style="width:230px">
  <em>cm</em>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-select active">  
    <input type="radio" name="wrist" id="wrist1" autocomplete="off" checked /> cm  
  </label>

  <label class="btn btn-select">
    <input type="radio" name="wrist" id="wrist2" autocomplete="off" /> in
  </label>
</div>

Answer 1

Bootstrap 不会像那样进行自定义 DOM 操作。您需要使用一些基本的 jQuery:

<span class="unit done">
  <input type="text" id="" name="" class="input1" value="" style="width:230px">
  <em>cm</em>
  <em style="display: none;">in</em>
</span>

<div class="btn-group btn-group-toggle unit-toggler pull-right" data-toggle="buttons">
  <label class="btn btn-select cm-unit active">  
    <input type="radio" name="wrist" id="wrist1" autocomplete="off" checked /> cm  
  </label>

  <label class="btn btn-select">
    <input type="radio" name="wrist" id="wrist2" autocomplete="off" /> in
  </label>
</div>


<script>
$('.unit-toggler input').change(function() {
  $('.unit em').toggle();
});
</script>

<强> Demo fiddle