jquery制作一个复选框

Question

我试图通过创建一个带有 id(选中)和类(未选中)的 div 来创建一个复选框；

我为这个 div 创建了另一个类(勾选)，如果它被点击的话。

然后，我创建了一个输入类型复选框以使用他的属性 checked 来更改我的 div 类的值 ('my input').is(':checked') status( 真 或假)。但问题是它在第 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/