Question

我正在使用以下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>

Answer 1

在这里添加一个标志..所以当用户执行tick的第一个动作并取消时它将变为真，下次用户将不允许根据标志状态更改颜色...我只给出了示例..你可以修改根据您的要求得出结果。

$("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");
            }
        }


    });
});

Answer 2

尝试捕捉包含元素的点击以控制复选框是有问题的。如果用户单击实际的复选框而不在其外部，它将无法正常工作。你也必须抓住复选框上的点击，并以不同的方式对待，即使这样，它也不适用于更改复选框状态的其他方式，而不是单击它。

相反，捕获复选框上的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>

演示：http://jsfiddle.net/89rx0mnc/

如果您还想允许单击父元素以更改复选框，则可以捕获该单击并在复选框上触发事件：

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

演示：http://jsfiddle.net/89rx0mnc/1/

jquery循环函数永远？

2 个答案: