Javascript jQuery复选框选择无法正常工作

我有一张这样的表格：

<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() {
            checklist[i]= "yes";
            $(this).closest('label').toggleClass("checkselected", this.checked);
        });
        $(this).closest('label').removeClass("checkselected");

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

现在我知道这可能不是正确的方法，因为我在

“$（'.form3'）中执行此操作

我怎样才能使它即使在多次单击同一复选框的情况下也能工作呢。
对于这个问题，您可能有一个很好的答案，但您可能正在构建这个数组来确定选中了哪些复选框；为什么不在需要查找时确定它呢？
这似乎是一种处理问题的奇怪方式

要修复您当前的代码，我将有如下内容：

$(document).ready(function(){ 

    $('.form3').find('input[type=checkbox]').change(function() {           

        var i = $(this).parent.index();

        if ($(this).is(":checked")) {
           checklist[i] = "yes"; 
        }
        else {
           checklist[i] ="";
        }      
    }); 
}

对于这个问题，您可能有一个很好的答案，但您可能正在构建这个数组以确定选中了哪些复选框；为什么不在需要查找时确定这些复选框呢？
这似乎是一种处理问题的奇怪方式

要修复您当前的代码，我将有如下内容：

$(document).ready(function(){ 

    $('.form3').find('input[type=checkbox]').change(function() {           

        var i = $(this).parent.index();

        if ($(this).is(":checked")) {
           checklist[i] = "yes"; 
        }
        else {
           checklist[i] ="";
        }      
    }); 
}

让我们逐步检查您的代码并找出它的错误

单击复选框时，您正在手动设置该复选框，无需执行此操作，此行将自动完成：

 $(this).find('input[type=checkbox]').attr('checked', true/false);

然后，您错误地使用了change（）。当您进行更改时，您将jquery设置为等待事件发生，以便它可以执行某些操作，即当复选框更改时，执行函数（）。在第一次单击后，它开始等待更改事件，下一次事件发生时。change（）不会立即进行更改。因此，您希望它执行以下操作：

 $(this).closest('label').toggleClass("checkselected", this.checked);

…无论复选框的值是什么，都会切换标签的类，这是您自己设置的。实际发生了什么？我不知道，因为我现在搞糊涂了。
如果它确实到达了切换，您将在第一个实例中立即删除该类，或者在第二个实例中添加该类（如果该类消失了），之后立即添加该类，使切换变得不必要：

 $(this).closest('label').add/removeClass("checkselected");

所有这些都导致了大屠杀，而你正试图通过使用数组来保持这一点。真是一场噩梦

如果您需要在form3类中的某个复选框的值发生更改时对其执行某些操作，请执行以下操作：

$('.form3 :checkbox').change(function(){

    //your stuff.
    $(this).closest('label').toggleClass("checkselected", this.checked);

});

您可以看到它在这里工作：

然后，无论您对数组做什么，都可以通过jquery和复选框进行查询。
让我们逐步检查您的代码，找出它的错误所在

单击复选框时，您正在手动设置该复选框，无需执行此操作，此行将自动完成：

 $(this).find('input[type=checkbox]').attr('checked', true/false);

然后，您错误地使用了change（）。当您进行更改时，您将jquery设置为等待事件发生，以便它可以执行某些操作，即当复选框更改时，执行函数（）。在第一次单击后，它开始等待更改事件，下一次事件发生时。change（）不会立即进行更改。因此，您希望它执行以下操作：

 $(this).closest('label').toggleClass("checkselected", this.checked);

…无论复选框的值是什么，都会切换标签的类，这是您自己设置的。实际发生了什么？我不知道，因为我现在搞糊涂了。
如果它确实到达了切换，您将在第一个实例中立即删除该类，或者在第二个实例中添加该类（如果该类消失了），之后立即添加该类，使切换变得不必要：

 $(this).closest('label').add/removeClass("checkselected");

所有这些都导致了大屠杀，而你正试图通过使用数组来保持这一点。真是一场噩梦

如果您需要在form3类中的某个复选框的值发生更改时对其执行某些操作，请执行以下操作：

$('.form3 :checkbox').change(function(){

    //your stuff.
    $(this).closest('label').toggleClass("checkselected", this.checked);

});

您可以看到它在这里工作：

然后，无论您使用数组做什么，都可以通过jquery查询复选框来完成。
感谢您的详细解释。让我告诉您我到底在尝试什么。基本上，我有这个复选框列表。一旦用户做出一些选择，我就将它们的索引值存储在数组中（还使用PHP会话跨页面存储值）。然后，如果用户使用复选框重新访问此页面，我将对复选框重新排序，使选定的复选框显示在顶部，然后是未选中的复选框。此外，我附加的类将以不同颜色显示选定的复选框。希望此附加信息可能有助于进一步解决此问题：）我以前从来没有这样做过，但是cookies或会话是正确的方向。所以你可以做一些像var checkedelements=$（'.form3:checkbox:checked'）每次发生更改时，请对页面再次加载时从cookie中提取的checkedelements执行$。谢谢您的详细解释。让我告诉您我到底在尝试什么。基本上我有这个复选框列表。一旦用户做出一些选择，我就将它们的索引值存储在一个数组中（还使用PHP会话跨页面存储值）。然后，如果用户使用复选框重新访问此页面，我将对复选框重新排序，使选定的复选框显示在顶部，然后是未选中的复选框。此外，我附加的类将以不同颜色显示选定的复选框。希望此附加信息可能有助于进一步解决此问题：）我以前从来没有这样做过，但cookie或session是正确的方向。因此，每次发生更改时，您都要执行var checkedelements=$（'.form3:checkbox:checked'）之类的操作，然后在页面再次加载时从cookie中提取的checkedelements上执行$。