跨度上点击

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> 

我试图改变持有的复选框跨度的背景色。当它被检查时。似乎无法得到任何工作。这里是我的最新尝试，这我真的觉得应该工作，因为跨度复选框的父..

$(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对象，它没有检查属性。所以，你可以使用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'); 
    }    
}); 

OR

您可以简单地使用

$("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好让你甚至不会需要用到，如果

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

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

    }); 

Answer 3

用这个代替$（本）

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

Answer 4

一点点简单的方法

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