jquery - 如果 div 有 (classname)，勾选复选框

Question

我正在尝试添加一些后端内容。但我不知道我做错了什么。

我已经创建了自己的代码，如果复选框被选中，将类添加到 div。

但是，在我的原始代码中，我想将该类添加到 div 中。但是当那个类已经存在时，复选框就不会被选中。

所以我的问题是:如何向已有的 JS 添加一段简单的代码？

下面是我的详细信息，Fiddle 在底部。

HTML:

<input class="b" type="checkbox" name="blue" value="">Check me for B.
<input class="s" type="checkbox" name="silver" value="">Check me for S.


<div class="b h">
    Some text and divs etc.    
</div>    
<div class="s">
    Some text and divs etc.    
</div>

CSS:

.b{
    background-color: blue;
    padding: 1em;
}
.s{
    background-color: silver;
    padding: 1em;
}
.h{
    border: 2px solid red;
}

JS:

$("input[type='checkbox'].b").click(function(){
    if(this.checked){
        $('div.b').addClass("h");
    } else {
        $('div.b').removeClass("h");
    }
}); 

$("input[type='checkbox'].s").click(function(){
    if(this.checked){
        $('div.s').addClass("h");
    } else {
        $('div.s').removeClass("h");
    }
}); 

示例:JsFiddle

任何帮助都会很好! D:

Answer 1

$("input[type='checkbox'].b").click(function(){
    if(this.checked){
        $('div.b').addClass("h");
    } else {
        $('div.b').removeClass("h");
    }
}); 

$("input[type='checkbox'].s").click(function(){
    if(this.checked){
      $('div.s').addClass("h");
    } else {
      $('div.s').removeClass("h");
    }
});

function checkCheckboxes() {
    if ($("div.b").hasClass("h")){
        $("input[type='checkbox'].b").prop("checked", "true");
    }

    if ($("div.s").hasClass("h")){
        $("input[type='checkbox'].s").prop("checked", "true");
    }
}

checkCheckboxes();