Question

我正在尝试更改bootstrap styled button group checkbox的标签文字，但一旦更改，就无法再次更改文字。（JSFiddle）

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：

$('#lblfilter-green').on('click', function (e) {
    var value = $('#filter-green').is(':checked');                

    if (value) {    
        $('#lblfilter-green').text("Off");
    } else {
        $('#lblfilter-green').text("On");
    }
});

注意 - 如果您使用更改或点击事件并且我只是以绿色按钮为例，我不确定是否重要。

Answer 1

以下是我的问题解决方案：

我添加了文本内容的范围，如：

    <label id="lblfilter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green" /><span>Off</span>
    </label>

然后我把你的jquery改为：

    $('label').click(function () {
        var checked = $('input', this).is(':checked');
        $('span', this).text(checked ? 'Off' : 'On');
    });

这提供了一种动态的方式来更改文本而您不必关心ID

Full Sample

Answer 2

经过多次调查并没有提出任何有用的东西，我关闭了引导样式，发现更改文本后复选框元素消失了 - 我想更改标签文本会替换复选框元素（不确定是否这样）是一个错误或设计，但它有点凌乱）。但我通过明确地添加复选框元素来解决它：（JSFiddle）

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：

$('#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");
    }
});

注意 - 如果我明确设置元素（JSFiddle），似乎没关系：

$('#lblfilter-green').html("<input type='checkbox' id='filter-green' 'checked' /> On");

我不确定为什么，但假设bootstrap在这里做了一些事情，好像你关闭了bootstap，它变得不可靠（只有你点击标签而不是复选框，因为事件被连接的方式）。

Answer 3

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

    $(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/

虽然我想知道您的代码的HTML结构如下所示。

<label id="lblfilter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green">Off</label>   //Input close tag is not there.

我保持您的代码相同，并根据未经检查/已检查的事件更改了开/关文本。我认为这就是你的要求。

Answer 4

这里是一个纯JavaScript引导解决方案，它没有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>

过渡有些棘手，但我敢肯定可以通过一些CSS来进行调整。

Answer 5

问题：如何在不删除复选框的情况下更改标签文本？

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：

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");

如何在切换bootstrap样式按钮组时检查复选框标签文本

5 个答案: