Question

在我的CSS中，我将.interest_selected_icon设置为display：none。如果选中其复选框，如何设置不同的CSS样式？

<input type="checkbox" id="people" name="chk_group[]" value="people">
<label class="interest_select" for="people">
    <div class="interest_wrapper">
        People
        <span class="interest_selected_icon">
            selected
        </span>
    </div>
</label>

Answer 1

不需要jQuery，你可以完全用CSS做到这一点：

<style>
    .interest_selected_icon {
        display:none;
    }

    input[type=checkbox]:checked + .interest_select .interest_selected_icon {
        display:block;
    }
</style>

Answer 2

input[type=checkbox] + label {
color:#ccc;
}
input[type=checkbox]:checked + label {
color:blue;
}

Answer 3

您可以在复选框的点击事件中通过DOM遍历找到相关的.interest_select div，如下所示：

$('#people').change(function() {
    var $icon = $(this).next('label').find('.interest_selected_icon')
    $icon[$(this).is(':checked') ? 'show' : 'hide']();
});

Example fiddle

Answer 4

尝试这个jQuery脚本，每次更改复选框时都会调用该脚本

$('#people').change(function(){
    if($(this).is(':checked')){
        // set style when checkbox is checked
    }else{
       // set style when is not checked
    }
});

如何在复选框标签内根据是否选中DIV进行样式设置？

4 个答案: