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();

Answer 2

Fiddle Demo

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

.prop()

.hasClass()

Answer 3

以下是另一种方法： http://jsfiddle.net/Olavxxx/LEC58/6/

JQuery的

$( document ).ready(function() {    
    $("input[type='checkbox'].b").change(function(){    
            $($(this).attr("data-target")).toggleClass("h");
    }); 

    $("input[type='checkbox'].s").change(function(){
            $($(this).attr("data-target")).toggleClass("h");
    }); 
});

HTML

<input class="b" data-target="div.b" type="checkbox" name="blue" value="" id="chkB">
<label for="chkB">Check me for B.</label>

<input class="s"  data-target="div.s"  type="checkbox" name="silver" value="" id="chkS">
<label for="chkS">Check me for S.</label>

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

我根据变化触发，而不是点击（没有太大区别，只要它没有被禁用）。你也可以使它更通用，对许多复选框使用相同的代码并使用if / else。

的开关

如果div有（classname），请选中复选框

3 个答案: