javascript - 选中复选框的背景颜色

Question

可能重复：
使用 jquery 更改 li 的背景颜色

我正在尝试在 onselect 'checkbox' 上更改 li 的背景颜色。

<ul>
 <li><input type="checkbox" /> Link 1</li>
 <li><input type="checkbox" /> Link 2</li>
 <li><input type="checkbox" /> Link 3</li>
 <li><input type="checkbox" /> Link 4</li>
</ul>

当有人选择复选框时，我需要更改整行背景颜色。

Answer 1

HTML

<ul>
 <li><input type="checkbox" /> <label> Link 1</label></li>
 <li><input type="checkbox" /> <label> Link 2</label></li>
 <li><input type="checkbox" /> <label> Link 3</label></li>
 <li><input type="checkbox" /> <label> Link 4</label></li>
</ul>​

CSS

label{width:150px; display:inline-block}
input[type="checkbox"]:checked+label{background:blue; color:white}​

演示

对于 IE，您可以使用类似http://selectivizr.com/的库

Answer 2

试试这个，我认为它会工作。

$('input[type=checkbox]').click(function(){
$('input[type=checkbox]').parent().css('background',''); //This turns all checkboxes background to default
$(this).parent().css('background','red');
});

Answer 3

试试这个：

$('input[type=checkbox]').click(function(){
    if(this.checked) {
        $(this).parent().css('background','red');
    } else {
        $(this).parent().css('background','');
    }
});

Answer 4

试试这个：

http://jsfiddle.net/AHrrP/

HTML

<ul>
 <li><input type="checkbox" /> Link 1</li>
 <li><input type="checkbox" /> Link 2</li>
 <li><input type="checkbox" /> Link 3</li>
 <li><input type="checkbox" /> Link 4</li>
</ul>​

JS

$(function(){
    $('input[type="checkbox"]').click(function(){
        if(this.checked)
            $(this).closest('li').addClass('blue');
        else
            $(this).closest('li').removeClass('blue');
    });
});​

CSS

li {
    padding:4px;
}

li.blue {
    background-color: #08C;
}​

Answer 5

jQuery

$('input[type=checkbox]').click(function(){
    $(this).parent().toggleClass('highlight');
});

CSS

.highlight{
    background-color:blue;
}

我假设您希望重新单击复选框时突出显示消失。这是一个工作的jsbin

Answer 6

$('li :checkbox').click(function(){
    $(this).parent().css('background',$(this):is(":checked")?'blue':'');
});

Answer 7

试试这个：

    <ul id="myList">
        <li><input type="checkbox" /> Link 1</li>
        <li><input type="checkbox" /> Link 2</li>
        <li><input type="checkbox" /> Link 3</li>
        <li><input type="checkbox" /> Link 4</li>
    </ul>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#myList input').each(function(){
            console.log(this);
                $(this).click(function(){
                console.log(this);
                    if($(this).prop('checked')){
                        $(this).parent().css('background','#eee');
                    }
                    else{
                        $(this).parent().css('background','');
                    }
                });
            });             
        });

    </script>