Question

<div id="lifecycleStage">
<div id="private2">
    <input type="radio" name="lifecyclePrivate" value="preliminary"         id="preliminary"/>      <label for="preliminary">Preliminary</label>
    <input type="radio" name="lifecyclePrivate" value="prelist"             id="prelist"/>          <label for="prelist">Prelist</label>            
    <input type="radio" name="lifecyclePrivate" value="retired"             id="retired"/>          <label for="retired">Retired</label> <br>           
    <input type="radio" name="lifecyclePrivate" value="internal product"    id="internalProduct"/>  <label for="internalProduct">Internal Product</label>   
    <input type="radio" name="lifecyclePrivate" value="reference nop"       id="referenceNOP"/>     <label for="referenceNOP">Reference NOP</label>     
</div>
<div id="public">
    <input type="radio" name="lifecyclePublic" value="listed"               id="listed"/>           <label for="listed">Listed  ................</label>             
    <input type="radio" name="lifecyclePublic" value="approaching op"       id="approachingOP"/>    <label for="approachingOP">Approaching OP</label>      
    <input type="radio" name="lifecyclePublic" value="no longer available"  id="noLongerAvailable"/><label for="noLongerAvailable">No Longer Available</label> 
</div>

我想要的是将所选标签的背景更改为不同的＆＃39;唯一的＆＃39;颜色。选择预列表时的示例，它具有蓝色背景，但是当选择退役时，它具有黑色背景。

任何提示和技巧，非常感谢！

Answer 1

$('label').on('click',function() {
    $('label').removeClass('active');
    $(this).addClass('active');
});

演示：http://jsfiddle.net/hpU6k/

Answer 2

为什么要使用jQuery？只需使用CSS：

label {
    background-color: #000;
}

input[type=radio]:checked + label {
    background-color: #00f;
}

JS Fiddle demo

使用jquery更改html标签的背景

2 个答案: