jquery循环函数永远？

我正在使用下面的jquery脚本，当用户单击复选框时，它将复选框的颜色更改为红色，当未选中复选框时，将复选框的颜色更改为黑色

复选框在未选中时以黑色开始，然后当用户单击复选框时，它会将复选框的背景更改为红色

我的问题是，如果用户在第一次从黑色变为红色时选中复选框，那么如果他们取消选中复选框，它将变回黑色。但是，无论出于何种原因，如果他们想重新选中复选框，它不会返回红色

有没有办法让这个函数在循环中运行？先谢谢你

<script>
    $(this).children("input").attr("checked");
    $(document).ready(function() {

// assuming all checkboxes are unchecked at first
$("span[class='checkbox']").addClass("unchecked");

    $(".checkbox").click(function(){
        if($(this).children("input").attr("checked")){
            // uncheck
            $(this).children("input").attr({checked: ""});
            $(this).removeClass("checked");
            $(this).addClass("unchecked");
        }else{
            // check
            $(this).children("input").attr({checked: "checked"});
            $(this).removeClass("unchecked");
            $(this).addClass("checked");
        }


    });
});
</script>

$（this）.children（“input”）.attr（“checked”）；
$（文档）.ready（函数（）{
//假设首先取消选中所有复选框
$（“span[class='checkbox']）；
$（“.checkbox”）。单击（函数（）{
if（$（this）.children（“输入”）.attr（“选中”））{
//取消勾选
$（this.children（“input”）.attr（{选中：}）；
$（此）.removeClass（“选中”）；
$（此）.addClass（“未选中”）；
}否则{
//检查
$（this.children（“input”）.attr（{checked:“checked”}）；
$（此）.removeClass（“未选中”）；
$（此）.addClass（“选中”）；
}
});
});

在此处添加一个标志。因此，当用户执行勾选和取消勾选的第一个操作时，它将变为真，下次用户将不允许根据标志状态更改颜色…我只给出了一个示例。您可以根据需要修改结果

$("span[class='checkbox']").addClass("unchecked");
var isCheckboxTicked = false;
    $(".checkbox").click(function(){
        if($(this).children("input").attr("checked")){
            // uncheck
            $(this).children("input").attr({checked: ""});
            $(this).removeClass("checked");
            $(this).addClass("unchecked");
            isCheckboxTicked = true;
        }else{
            // check
            if(!isCheckboxTicked){
             $(this).children("input").attr({checked: "checked"});
             $(this).removeClass("unchecked");
             $(this).addClass("checked");
            }
        }


    });
});

---

试图捕捉对包含元素的单击以控制复选框是有问题的。如果用户单击实际复选框而不在其外部，则它将无法正常工作。您还必须捕获对复选框的单击，并以不同的方式对待它，即使这样，除了单击复选框之外，其他更改复选框状态的方法也不起作用

相反，捕获复选框上的

change

事件，并根据复选框的状态更改包含元素上的类：

<script>

$(document).ready(function() {

  $("span.checkbox").addClass("unchecked");

  $(".checkbox input").change(function(e){
    var container = $(this).closest('.checkbox');
    var checked = $(this).prop("checked");
    container.toggleClass("unchecked", !checked);
    container.toggleClass("checked", checked);
  });

});

</script>

$(".checkbox").click(function(e){
  if(e.target == this) {
    $(this).children("input").click();
  }
});

---

演示：

$（this）.children（“输入”）.attr（“选中”）这会导致错误…@BhojendraNepal:该代码除了读取属性然后忽略它之外，实际上不会执行任何操作。如果代码块不在元素下面，那么它甚至不会这样做，因为元素还不存在。我的意思是在OP问题的
后面的第一行代码。。