Question

我有一个这样的表格：

<form action='' onsubmit='void(0)' class="mainform">
                <label class="form3"><input type="checkbox"> One a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> two a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Three a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Four a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Five a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Six a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Seven a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> eight a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 9 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 10 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 11 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 12 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 13 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 14 a fancy cross-browser styled checkbox</label>
</form>

现在，我想这样做。当用户选中或取消选中复选框时，我想在标签中添加/删除类，以便在选中复选框时以及不选中时可以显示不同颜色的文本。

我正试图这样做：

$(document).ready(function(){
$('.form3').each(function(i,e) {
   if(checklist[i] == "")
    {
        $(this).find('input[type=checkbox]').attr('checked', false);
        $(this).appendTo($('form'));
        $(this).find('input[type=checkbox]').change(function() {
            $(this).closest('label').addClass("checkselected");
        });
        $(this).closest('label').removeClass("checkselected");

    }
    else
    {
        $(this).find('input[type=checkbox]').attr('checked', true);
        $(this).find('input[type=checkbox]').change(function() {
            $(this).closest('label').removeClass("checkselected");
        });
        $(this).closest('label').addClass("checkselected");
    }
});
});

现在我知道这可能不是正确的方法，因为我在“$（'。form3'）中这样做。每个（函数（i，e）”

这使它工作但只有一次。即使多次点击同一个复选框，我怎样才能使它工作。

Answer 1

如果我已正确理解您的问题，那么您要做的是将Click事件处理程序绑定到所有复选框，并将类添加/删除到已单击的类的父label 。如果这是正确的，那么你可以这样做：

$("input[type='checkbox']").change(function() {
   $(this).closest("label").toggleClass("someClass"); 
});

toggleClass方法无需检查复选框是否已选中。您可以传入第二个参数来显示是否应该添加或删除该类，因此如果某些复选框已经开始检查，您可能需要使用它：

$("input[type='checkbox']").change(function() {
   $(this).closest("label").toggleClass("someClass", this.checked); 
});

以上是上述代码的working example。

jQuery Checkbox选择和更改类

1 个答案: