Question

我有一系列复选框（基于用户选择），我使用bootstrap CSS并想要更改父级（标签）。下面的代码有点工作，它会改变类，但是一旦取消选中它就应该恢复原状。

HTML代码：

   <div class="btn-group" data-toggle="buttons">
     <label for="status" class="btn btn-default">
      <input type="checkbox" name="status[]" id="status" value="1"> 
        <span class="glyphicon glyphicon-ok"></span>
     </label>
   </div>

Jquery的：

     $('input:checkbox').change(function () {
       if ($(this).prop('checked', true)) {
           $(this).parent().addClass('btn btn-primary');
       } else {
          ($(this).prop('checked', false)); 
           $(this).parent().addClass('btn btn-default');
        }
      });

我尝试了几个替代品，toggleClass等，但它不太正确。我希望一旦用户取消选中它就会回到原始类--btn-default。

以下是jsfiddle上的代码：http://jsfiddle.net/#&togetherjs=T34b6tblRc

非常感谢帮助，谢谢！

Answer 1

这可行吗？如果没有，请告诉我删除我的答案

$('input').click(function () {
    $(this).parent().removeClass($(this).is(':checked') ? 'btn btn-default' : 'btn btn-primary'); 
    $(this).parent().addClass($(this).is(':checked') ? 'btn btn-primary' : 'btn btn-default'); 
});

Answer 2

如果要阅读属性，则只应向.prop()提供一个参数。给两个参数将属性设置为第二个参数，它不会将属性与它进行比较。所以它应该是：

$('input:checkbox').change(function () {
    if ($(this).prop('checked')) {
        $(this).parent().addClass('btn btn-primary');
    } else {
        $(this).parent().addClass('btn btn-default');
    }
});

您也可以使用if (this.checked)，这比创建jQuery对象并在其上调用方法更有效。

Answer 3

将您的代码更改为：

$('input').change(function () {           
    var checked = $(this).is(':checked');
    $(this).parent().toggleClass('btn-primary',checked);
    $(this).parent().toggleClass('btn-default',!checked);    
});

这将完全改变课程。你不需要删除btn类。

$('input').change(function () {           
    var checked = $(this).is(':checked');
    $(this).parent().toggleClass('btn-primary',checked);
    $(this).parent().toggleClass('btn-default',!checked);    
});

.btn-primary{
    background-color: red;
}

.btn-default{
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
     <label for="status" class="btn btn-default">
      <input type="checkbox" name="status[]" id="status" value="1"> 
        <span class="glyphicon glyphicon-ok"></span>
     </label>
   </div>

Answer 4

添加＆＃39; btn btn-default＆＃39;手动上课

$('input').change(function () {
   var b = $(this).is(':checked');
   $(this).parent().addClass(b?'btn-primary':'btn-default');
   $(this).parent().removeClass(!b?'btn-primary':'btn-default');
});

Answer 5

你在jsfiddle上的代码是空白的。请修理它。我想在jsfiddle中查看你的代码，看它是如何工作的。

Jquery：根据复选框的选中/取消选中更改Label类

5 个答案: