两件事

Question

如何选中对应于复选框的文本。我希望在选中时将文本更改为一个值，并在取消选中该框时将其恢复。

＆＃13;

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

＆＃13;

Answer 1

重新排列你的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 2

如果你把“关闭”放在一个范围内：

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

两件事

1）将事件附加到所有复选框（不仅最初检查）

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

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

2）更改文本文本，而不是更改文本......

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

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

最后）toogle＆＃34; on＆＃34; /＆＃34;关闭＆＃34;标签上的文字应该很简单：）

Answer 4

仅CSS选项： - 您可以通过更改标签文本并仅使用CSS来执行此操作 - 并切换标签的开启状态文本和关闭状态文本的显示状态：

.btn .off,.btn.active .on {    			
	display:block			
}
.btn.active .off,.btn .on  {				
	display:none			
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<div class="btn-group" data-toggle="buttons">
	 <label class="btn btn-success active">
	    <input type="checkbox" autocomplete="off" checked>
			<span class='on'>On</span>
            <span class='off'>Off</span>
	</label>
  </div

Answer 5

您可以使用“下一个兄弟”~与:checked选择器结合使用，以便对您的状态作出反应，从而获得免费的javascript解决方案（这总是一个加号imo）复选框。

如果你在标记中添加“on”和“off”标签，每个标签都有自己的类，所以它看起来像这样：

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

现在您可以根据复选框的状态确定哪一个是可见的，如下所示：

.label-on {
  display: none;
}
input:checked ~ .label-off {
  display: none;
}
input:checked ~ .label-on {
  display: inline;
}

看看我设置的示例： https://jsfiddle.net/a41d85gb/

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

5 个答案:

两件事