跨度上點擊

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');    
    });