twitter-bootstrap 在引导程序样式按钮组上切换检查时如何更改复选框标签文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26255351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change checkbox label text when toggling check on bootstrap styled button group
提问by Mr Shoubs
I'm trying to change the label text for a bootstrap styled button group checkbox, but once changed, it isn't possible to change the text again. (JSFiddle)
我正在尝试更改bootstrap 样式按钮组复选框的标签文本，但一旦更改，就无法再次更改文本。( JSFiddle)
HTML:
HTML：
<div class="btn-group form-group pull-right" data-toggle="buttons">
<label id="lblfilter-green" for="filter-green" class="btn btn-success">
<input type="checkbox" id="filter-green"/>
On
</label>
</div>
Javascript:
Javascript：
$('#lblfilter-green').on('click', function (e) {
var value = $('#filter-green').is(':checked');
if (value) {
$('#lblfilter-green').text("Off");
} else {
$('#lblfilter-green').text("On");
}
});
Note - I'm unsure if it matters if you use change or click event and that I'm only doing the green button as an example.
注意 - 我不确定使用更改或点击事件是否重要，我只是以绿色按钮为例。
回答by Steven Web
Here is my solution for your problem:
这是我针对您的问题的解决方案：
I added a span for the text content like:
我为文本内容添加了一个跨度，例如：
<label id="lblfilter-green" class="btn btn-success">
<input type="checkbox" id="filter-green" /><span>Off</span>
</label>
Then i altert you jquery to:
然后我将 jquery 更改为：
$('label').click(function () {
var checked = $('input', this).is(':checked');
$('span', this).text(checked ? 'Off' : 'On');
});
This provides a dynamic way to change the text and you dont have to care about ID's
这提供了一种更改文本的动态方式，您不必关心 ID
回答by Mr Shoubs
After much investigation and not coming up with anything useful, I turned off the bootstrap styling and found that the check box element disappeared after you changed the text - I guess changing the label text replaces the check box element (not sure if this is a bug or by design, but its a little messy). But I solved it by adding the check box element back in explicitly: (JSFiddle)
经过大量调查并没有提出任何有用的东西，我关闭了引导程序样式，发现更改文本后复选框元素消失了 - 我猜更改标签文本会替换复选框元素（不确定这是否是错误或按设计，但它有点凌乱）。但是我通过显式添加复选框元素来解决它：（JSFiddle）
HTML:
HTML：
<div class="btn-group form-group pull-right" data-toggle="buttons">
<label id="lblfilter-green" for="filter-green" class="btn btn-success">
<input type="checkbox" id="filter-green">
On
</label>
</div>
Javascript:
Javascript：
$('#lblfilter-green').on('click', function (e) {
var value = $('#filter-green').is(':checked');
if (value) {
$('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> Off");
} else {
$('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> On");
}
});
Note - it doesn't seem to matter if I set checked on the element explicitly (JSFiddle):
注意 - 如果我在元素上显式设置检查（JSFiddle）似乎并不重要：
$('#lblfilter-green').html("<input type='checkbox' id='filter-green' 'checked' /> On");
I'm unsure why, but assume bootstrap is doing something here as if you turn bootstap off, it becomes unreliable (and only works if you click the label not the check box due to the way the event is hooked up).
我不确定为什么，但假设 bootstrap 在这里做了一些事情，就像你关闭 bootstap 一样，它变得不可靠（并且只有当你点击标签而不是复选框时才有效，因为事件的连接方式）。
回答by dalchri
Here is a pure bootstrap solution without JavaScript using a button toggle nested inside a collapse toggle.
这是一个没有 JavaScript 的纯引导解决方案，使用嵌套在折叠切换中的按钮切换。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div data-toggle="collapse" data-target=".check-box-label">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<label class="check-box-label collapse show active" style="transition:none;">Checked</label>
<label class="check-box-label collapse" style="transition:none;">Unchecked</label>
<input type="checkbox" checked autocomplete="off">
</label>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>The transition is a little twitchy but I'm sure that can be tweaked with some CSS.
过渡有点紧张，但我相信可以通过一些 CSS 进行调整。
回答by MD Russel
Question: How can I change the label text without removing the checkbox?
问题：如何在不删除复选框的情况下更改标签文本？
HTML Code:
HTML代码：
<label class="optional" for="checkout_offer_opt_in">
<input class="optional" type="checkbox"name="checkout_offer[opt_in]" id="checkout_offer_opt_in">
You can unsubscribe anytime
</label>
JavaScript:
JavaScript：
var email_list_text = $('label[for=checkout_offer_opt_in]');
email_list_text .html(email_list_text .find('input'));
$(email_list_text ).append("By buying this product you agree to automatically");
回答by Ashish
HTML Code -
HTML 代码 -
<div class="btn-group form-group" data-toggle="buttons">
<label id="lblfilter-green" class="btn btn-success">
<input type="checkbox" id="filter-green" />Off</label>
<label id="filter-amber" class="btn btn-warning">
<input type="checkbox" id="filter-amber" />Off</label>
<label id="filter-red" class="btn btn-danger">
<input type="checkbox" id="filter-red" />Off</label>
</div>
jQuery Code -
jQuery 代码 -
$(document).on('click', '#lblfilter-green', function (e) {
var value = $('#filter-green').is(':checked');
if (value ==false) {
$(this).html("<input type='checkbox' id='filter-green'>On");
} else {
$(this).html("<input type='checkbox' id='filter-green'>Off");
}
});
JSFiddle - http://jsfiddle.net/Ashish_developer/yhdzuakb/
JSFiddle - http://jsfiddle.net/Ashish_developer/yhdzuakb/
Though I wonder the HTML structure of your code is like below.
虽然我想知道您的代码的 HTML 结构如下所示。
<label id="lblfilter-green" class="btn btn-success">
<input type="checkbox" id="filter-green">Off</label> //Input close tag is not there.
I kept your code the same and changed just On/off text based on unchecked/checked events. I think this is what your requirement was.
我让你的代码保持不变，只是根据未选中/选中的事件更改了开/关文本。我想这就是你的要求。
