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>

现在，我想这样做。当我检查并取消选中框时，我正在更新数组'清单'。如果选中该框，我将相应的数组值设置为“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"); 
    } 
}); 
});

现在我知道，这是maynot做正确的方式，因为我在做这个"$('.form3').each(function(i,e)"

里面我怎样才能使它即使mulltiple点击相同的复选框工作。

答

通过您的代码让一步，并找出哪些是错的。

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

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

然后，您使用的变化（）不正确。当你改变时，你设置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); });

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

那么无论你是用数组处理，你可以通过jQuery复选框来完成。

感谢您的努力，详细解释。让我告诉你我正在尝试的是什么。基本上我有这个复选框的列表。一旦用户做出了一些选择，我将它们的索引值存储在一个数组中（也使用PHP Session来存储跨页面的值）。然后，如果用户使用复选框重新访问此页面，我会重新排序复选框，以使所选的页面显示在顶部，然后显示未选中的页面。另外，我追加的课程是以不同颜色显示选定的复选框。希望这些额外的信息可能有助于进一步提高这一点:) – ssdesign

我从来没有真正做到过，但饼干或会议是正确的方向。 –

因此，每当发生更改时，您都会执行类似于var checkedelements = $（'。form3：checkbox：checked'）的操作，然后在页面再次加载时从Cookie中提取checkedelements，然后执行$ .each。 –

答

您可能对此有一个很好的答案，但大概您正在构建此数组以确定选中哪个复选框;你为什么不确定当你需要找出答案？这似乎是接近问题的一种奇怪的方式...

要解决当前的代码，我会是这样的：

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

jQuery的复选框的选择不能正常工作

相关推荐