选择复选框的背景颜色

Question

  

可能重复：
  change background color of li using jquery

我正在尝试在onselect'复选框'上更改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}​

<强> DEMO

对于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>