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() {
            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

你可能对这个问题有一个很好的答案，但可能你正在构建这个数组以确定检查哪些复选框;你为什么不确定什么时候需要找出来？这似乎是一种解决问题的奇怪方式......

要修复当前代码，我会有类似的内容：

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

Answer 2

让我们逐步完成您的代码并找出问题所在。

当您点击它时手动设置复选框，您不需要这样做，这一行是自动为您完成的：

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

然后，您错误地使用change（）。当您进行更改时，将jquery设置为等待事件发生，以便它可以执行某些操作，即当复选框更改时，执行function（）。它会在下次事件发生时开始等待第一次点击后的更改事件。 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);

});

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

然后无论你使用数组做什么，都可以通过jquery复选框来完成。

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

2 个答案: