当子输入检查时更改父div的背景颜色

Question

以下是代码。我需要的是当选择“女性”输入时更改.register-switch的背景颜色。 我想：

input[value="Female"]:checked + .register-switch { 
    background: red; 
} 

，但它不工作。是否有可能在不使用JavaScript的情况下达到预期的效果？

.register-switch { 
 
    height: 32px; 
 
    margin-bottom: 20px; 
 
    padding: 4px; 
 
    background: lightblue; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.register-switch-input { 
 
    display: none; 
 
} 
 
.register-switch-label { 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #fff; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.register-switch-input:checked + .register-switch-label { 
 
    font-weight: normal; 
 
    color: #666; 
 
    background: #fff; 
 
    border-radius: 2px; 
 
    background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -moz-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -o-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: linear-gradient(to bottom, #fefefe, #eeeeee); 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
}

<div class="register-switch"> 
 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
 
    <label for="sex-m" class="register-switch-label">Male</label> 
 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
 
    <label for="sex-f" class="register-switch-label">Female</label> 
 
</div>

Answer 1

你可以尝试这样的事情。

代替将背景颜色到父元素，创建一个:afterpseudo-element用100％的高度和宽度，并应用背景，以after以后这可以通过使用+ selector.make确保设置position:relative上的父存取元件（.register-switch）

.register-switch { 
 
    height: 32px; 
 
    margin-bottom: 20px; 
 
    padding: 4px; 
 
    position:relative; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.register-switch-input { 
 
    display: none; 
 
} 
 
.register-switch-label { 
 
    float: left; 
 
    width: 50%; 
 
    line-height: 32px; 
 
    color: #fff; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.register-switch-label:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    background:lightblue; 
 
    left:0; 
 
    top:0; 
 
    z-index:-1; 
 
    } 
 
.register-switch-input:checked + .register-switch-label:after{ 
 
    background:tomato; 
 
    } 
 
.register-switch-input:checked + .register-switch-label { 
 
    font-weight: normal; 
 
    color: #666; 
 
    background: #fff; 
 
    border-radius: 2px; 
 
    background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -moz-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: -o-linear-gradient(top, #fefefe, #eeeeee); 
 
    background-image: linear-gradient(to bottom, #fefefe, #eeeeee); 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1); 
 
}

<div class="register-switch"> 
 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
 
    <label for="sex-m" class="register-switch-label">Male</label> 
 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
 
    <label for="sex-f" class="register-switch-label">Female</label> 
 
</div>

Answer 2

可以使用jQuery来选择所述无线输入的父元素和添加/删除一个CLA ss当输入改变时。

<div class="register-switch"> 
    <input type="radio" name="sex" value="Male" id="sex-m" class="register-switch-input" checked> 
    <label for="sex-m" class="register-switch-label">Male</label> 
    <input type="radio" name="sex" value="Female" id="sex-f" class="register-switch-input"> 
    <label for="sex-f" class="register-switch-label">Female</label> 
</div> 

.clicked { 
    background-color: red; 
} 

$('.register-switch-input').on('change', function() { 
    $this = $(this); 
    $this.parent().addClass('clicked'); 
}); 

http://jsfiddle.net/yfh301od/