如何更改文本标签复选框引导？

Question

如何在选中复选框时更改相应的文本。我希望在选定时将文本更改为一个值，并在未选中的框中返回。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
  <div class="row">
    <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
  <label class="btn btn-primary ck">
    <input type="checkbox"> off
  </label>
</div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
  $('input[type=checkbox]:checked').on('change', function () {
    $(this).text("on");
  });
</script>

​

Answer 1

如果你把“关”放在一个跨度里：

<label class="btn btn-primary ck">
  <input type="checkbox"> <span>off</span>
</label>

你可以这样做：

 $('input[type=checkbox]').on('change', function() {
    var status = $(this).parent().find('span');
    if (status.text() === "on") {
      status.text("off");
    } else {
      status.text("on");
    }
 });

看看这把小提琴：https://jsfiddle.net/wietsedevries/bahujj8u/1/

Answer 2

重新排列你的DOM -

<div class="container">
  <div class="row">
    <div class="btn-group" data-toggle="buttons">
     <label class="btn btn-primary ck">off </label>
     <input type="checkbox"> 
     <label class="btn btn-primary ck">off</label>
     <input type="checkbox"> 
     <label class="btn btn-primary ck">off</label>
     <input type="checkbox">    
    </div>
  </div>
</div>

试试这个jQuery

$('input[type=checkbox]').on('change', function () {

   if ($(this).prev().text() === 'off') {
    $(this).prev().text('on')
    } else {
    $(this).prev().text('off')
    }
});

这是一把小提琴http://jsfiddle.net/hMS6Y/265/

Answer 3

两件事

1)将事件附加到所有复选框(不仅最初选中)

NO: $('input[type=checkbox]:checked')

是： $('input[type=checkbox]')

2)更改文本，而不是更改.的文本。

NO: $(this).text("on");

是： $(this).closest("label").text("on");

最后，点击标签上的" on“/ "off”文本，应该很简单:)