使用jquery在check操作上切換復選框的父類

Question

我正在嘗試制作一個包含多個復選框的表單。 我想突出顯示其內容的復選框，以向用戶指示選擇
我正在為我的表單使用以下布局

HTML

<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>

CSS

.labl{

height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}

jQuery的

<script>

$("input[type=checkbox]").change(function() {
    $(this).parent().toggleClass("chked");
});

</script>

現在當檢查alpha時，它應該將div的類從labl更改為chked
但事實並非如此

Answer 1

你需要一個DOM就緒處理程序，比如$(function(){...});

$(function () {
    $("input[type=checkbox]").change(function () {
        $(this).parent().toggleClass("chked");
    });
});

文檔

更新

看來復選框是動態添加到DOM的，所以你必須使用這樣的事件委托

    $(document).on("change","input[type=checkbox]",function () {
        $(this).parent().toggleClass("chked");
    });

Answer 2

您可以將類名傳遞給toggleClass（）方法，以便一次只應用其中一個

jQuery(function(){
    $("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass("labl chked");
    });
})

演示： 小提琴

Answer 3

只需將腳本更改為

$("input[type=checkbox]").change(function() {
    $(this).parents('.labl').toggleClass("chked");
}); 

和你的HTML

<form>
<div class='labl'>
    <input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>

這是更新的小提琴

http://jsfiddle.net/k242J/

Answer 4

toggleClass功能是檢查類，如果沒有它會添加，否則刪除它就是這樣的類。 它不會從一個班級改為另一個班級。

CSS

.chked {
    background: #4285f4;
}

JS

$("input[type=checkbox]").change(function() {
     $(this).parent().toggleClass("chked");
 });