Question

提前谢谢！ Javascript新手。

我需要开发位于div内的自定义复选框，当您单击标签或复选框时，div的边框和字体颜色会发生变化。我以为我可以用CSS做到这一点，但我开始认为我需要JS。

到目前为止，这是我的代码：

CSS：

input[type=checkbox] {
    display: none;
}

div.label {
    display:block;
    border: 1px solid gray;
    border-radius: 23px;
    line-height: 30px;
    height:50px;
    width: 225px;
    text-align:center;
}

label {
    color:gray;
    line-height:50px;
}

label:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 10px;
    background-color: #ffffff;
}


input[type=checkbox]:checked + label:before {
    content: "\2713";
    font-size: 15px;
    color: red;
    line-height: 15px;
    margin-left:10px; 
    margin-top: 15px;
}

input[type=checkbox]:checked + label:after {
    color: red;
}

HTML：

<div class="label">
<input id="weekly" type="checkbox" name="lists[weekly]" value="True" />
<label for="weekly">Weekly Preview Email</label><br>
</div>

非常感谢任何帮助!!

Answer 1

使用jQuery，

$(function(){
    $('input[type="checkbox"]').on('change', function(e){
        return $(this).parent().toggleClass('checked');
    });
});

这会将“checked”类添加到父div。您可以为父级定义CSS。

工作小提琴here。

编辑：根据评论，在CSS中添加了一种样式来为标签着色。 Fiddle here

Answer 2

只用CSS就可以了：

复选框需要直接在您要设置样式的第一件事之前。在您的示例中，它需要位于div.label前面。对于页面中的多个div，请务必更改每个for和相应的id。

input:checked + div将在已检查的输入后直接定位div。

Have a jsBin example!（现在有一个勾号）

Here is the same example with multiple checkboxes and divs

HTML

<input id="weekly" type="checkbox" name="lists[weekly]" value="True" />
<div class="label">    
<label for="weekly">Weekly Preview Email (click me)</label><br>
</div>

CSS

input[type=checkbox] {
    display: none;
}

input:checked + div {
    border: solid 1px #000;
    color: #F00;
}

input:checked + div:before {
    content: "\2713";
    padding: 20px;
}

Answer 3

我会做像

这样的事情

$('.label').click(function(){debugger;
$(this).toggleClass("checked")


});

添加已检查的css类

.checked {
   border:1px solid black;
   color:red;
}

它会执行您想要的操作，在选中/取消选中复选框或单击标签时更改边框/文本。

Fiddle here

单击时更改标签颜色和输入+标签

3 个答案: