1

重複の可能性：
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>

チェックボックスを選択したときに、行全体の背景色を変更する必要があります。

ここに画像の説明を入力

4

7 に答える 7

2

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/のようなライブラリを使用できます。

于 2012-11-21T10:18:47.967 に答える
1

これを試してみてください。うまくいくと思います。

$('input[type=checkbox]').click(function(){
$('input[type=checkbox]').parent().css('background',''); //This turns all checkboxes background to default
$(this).parent().css('background','red');
});
于 2012-11-21T10:16:46.200 に答える
1

これを試して：

$('input[type=checkbox]').click(function(){
    if(this.checked) {
        $(this).parent().css('background','red');
    } else {
        $(this).parent().css('background','');
    }
});
于 2012-11-21T10:18:15.020 に答える
1

これを試して：

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;
}​
于 2012-11-21T10:22:34.607 に答える
0

jQuery

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

CSS

.highlight{
    background-color:blue;
}

チェックボックスが再クリックされたときにハイライトを消したいと思います。ここに動作するjsbinがあります

于 2012-11-21T10:18:17.080 に答える
0 
$('li :checkbox').click(function(){
    $(this).parent().css('background',$(this):is(":checked")?'blue':'');
});
于 2012-11-21T10:21:28.453 に答える
0

これを試して：

    <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>
于 2012-11-21T10:22:15.437 に答える