Question

我试图通过创建一个带有id（check）和class（未选中）的div来创建一个复选框;

我为这个div创建了另一个类（已选中），如果它被点击了。

然后，我创建了一个输入类型复选框以使用他的属性检查，以便从('my input').is(':checked')状态（ true 或 false ）。但问题是它在第3次点击时起作用，在第4次点击时没有任何反应。

我的html代码是一个div，其中check为id，第一次取消选中为class。我对已选中和未选中的定义是关于背景图像，其中图像未标记，另一个图像检查

JS：

$(document).ready(function() { $('#check').click(function(){ var isChecked = $('input[name=it]').is(':checked'); if(isChecked){ $( "#check" ).removeClass( "checked" ).addClass( "unchecked" ); $('input[name=it]').attr('checked', false); } else{ $( "#check" ).removeClass( "unchecked" ).addClass( "checked" ); $('input[name=it]').attr('checked', true); } }); });

Answer 1

input[type=checkbox]无需设置状态。你可以使用一个类，它将完成这项工作。使用Jquery .hasClass()选择器而不是设置属性。这是一个例子：

HTML：

<div id="check"></div>

JS：

$("#check").click(function() {
if($(this).hasClass("checked")) {
        $(this).removeClass("checked");
    }
    else {
        $(this).addClass("checked");
    }
});

CSS：

#check
{
    width: 10px;
    height: 10px;
    background:blue;
}

#check.checked
{
    background: red;
}

JsFiddle：http://jsfiddle.net/dZfGk/

jquery制作一个复选框

1 个答案: