jQuery复选框选择未正常工作

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>

现在，我想这么做。当我选中和取消选中这些框时，我正在更新数组“核对表”。如果选中该框，则将相应的数组值设置为"yes"，如果未选中，则将其设置为空。

现在的问题是，值的设置只起一次作用，如果我取消选中一个复选框并再次选中它，它的值仍然是未选中的。

我试着这样做：

$(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').each(function(i,e)"中执行此操作的

我怎样才能让它工作，即使在同一个复选框上多次点击。

Answer 1

让我们逐步检查您的代码，找出它的错误所在。

您是在单击复选框时手动设置的，您不需要这样做，这一行将自动为您设置：

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

然后，您错误地使用了change()。当你改变时，你设置jquery等待一个事件发生，这样它就可以做一些事情，例如，当复选框改变时，执行function()。它在第一次单击之后，即下一次事件发生时，开始等待更改事件。Change()不会立即进行更改。所以你想让它这样做：

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

无论您刚才设置的复选框的值是什么，...which都会切换标签的类别。实际发生了什么？我不知道，因为我现在糊涂了。如果它确实达到了切换，你将在第一个实例中直接删除这个类，或者如果它在第二个实例中消失了，就添加它，然后直接添加，使切换变得不必要：

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

所有这一切都会导致大屠杀，您正试图与使用数组保持并行。真是一场噩梦！

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

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

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

});

你可以在这里看到它的工作原理：http://jsfiddle.net/py6bC/5/

然后，无论您对数组做了什么，都可以通过jquery复选框来完成。

Answer 2

对于这个问题，您可能有一个很好的答案，但假设您是在构建这个数组来确定选中了哪些复选框；为什么不在需要时确定一下？这似乎是一种奇怪的解决问题的方式……

要修复您当前的代码，我需要如下代码：

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