jQuery制作一个复选框

Question

我正在尝试通过创建一个带有 id（选中）和类（未选中）的 div 来创建一个复选框；

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

然后，我创建了一个输入类型复选框以使用选中的属性来更改我的 div 类的值 ('my input').is(':checked') status(true 或 false) .但问题是它在第 3 次点击时有效，在第 4 次点击时没有任何反应。

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

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/