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"); 
    } 
}); 
}); 

現在我知道，這是maynot做正確的方式，因爲我在做這個"$('.form3').each(function(i,e)"

裏面我怎樣才能使它即使mulltiple點擊相同的複選框工作。

Answer 1

通過您的代碼讓一步，並找出哪些是錯的。

手動設置的複選框，當你點擊它，你不必這樣做，這行是爲您自動完成：

$(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複選框來完成。

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