跨度不会改变点击类

Question

我有一些标记，如下所示

<div class="col-md-3">
  <div class="input-group">
    <span class="input-group-addon bootstrap-addon-info">
    <asp:CheckBox runat="server" Checked="True" /></span>
    <asp:TextBox ID="equitytrading" runat="server" CssClass="form-control bootstrap-default" text="Equity Trading" TextMode="SingleLine"></asp:TextBox>
  </div>
  <div class="input-group">
     <span class="input-group-addon bootstrap-addon-info">
     <asp:CheckBox runat="server" Checked="False"  /></span>
     <asp:TextBox ID="optionstrading" runat="server" CssClass="form-control  bootstrap-default" text="Options Trading" TextMode="SingleLine"></asp:TextBox>
  </div>
  <div class="input-group">
     <span class="input-group-addon bootstrap-addon-info">
     <asp:CheckBox runat="server" Checked="False"  /></span>
     <asp:TextBox ID="futurestrading" runat="server" CssClass="form-control  bootstrap-default" text="Futures Trading" TextMode="SingleLine"></asp:TextBox>
  </div>                       
</div>

我正在尝试更改包含复选框的范围的背景颜色。什么时候检查。似乎无法获得任何工作。这是我最近的尝试，我认为应该可以使用，因为span是复选框的父级。

 $(document).ready(function () {
       $("input[type='checkbox']").each(function() {
           if ($(this).checked) {
               $(this).parent().removeClass('bootstrap-addon-info');
               $(this).parent().addClass('bootstrap-addon-success');
           }               
       });          
   });

更新

工作版如下，感谢那些回复帮助的人。

    $(document).ready(function () {
        var checkboxes = $("input[type='checkbox']");
        checkboxes.on('click',function() {
           //per chriz suggestion for chaining
           if (this.checked) {
               $(this).parent().removeClass('bootstrap-addon-info').addClass('bootstrap-addon-success');
           } else {
               $(this).parent().removeClass('bootstrap-addon-success').addClass('bootstrap-addon-info');
           }
       });
        checkboxes.each(function () {
            //so on page load the checked ones that were set in the html had the success class
            if (this.checked) {
                $(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
            }
        });
    });

Answer 1

您的语法不正确。 $(this)是一个jQuery对象，它没有checked属性。因此，您可以使用this.checked或$(this).prop('checked')

使用

$("input[type='checkbox']").each(function() {
   if (this.checked) {
       $(this).parent().removeClass('bootstrap-addon-info');
       $(this).parent().addClass('bootstrap-addon-success');
   }               
});

或 的

您只需使用

即可

$("input[type='checkbox']:checked").each(function() {
       $(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
});

编辑：

您也可以尝试

$("input[type='checkbox']").change(function() {
    if(this.checked)
        $(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
    else
        $(this).parent().toggleClass('bootstrap-addon-success bootstrap-addon-info');
}).change();

Answer 2

而不是在所有复选框上使用.each。尝试获取checked的复选框，以便您甚至不需要使用if

$("input[type='checkbox']:checked").each(function() {

           $(this).parent().removeClass('bootstrap-addon-info');
           $(this).parent().addClass('bootstrap-addon-success');

   });

Answer 3

更简单的方法

$("input[type='checkbox']:checked").each(function() {
           $(this).parent().addClass('bootstrap-addon-succes').removeClass('bootstrap-addon-info');               
   });

Answer 4

使用此代替$（this）

$(document).ready(function () {
       $("input[type='checkbox']").each(function() {
           if (this.checked) {
               $(this).parent().removeClass('bootstrap-addon-info');
               $(this).parent().addClass('bootstrap-addon-success');
           }               
       });          
   });