jQuery複選框沒有檢查

Question

我有一個表單設置，所以當你選擇一個複選框時，相關的UL將展開顯示更多選項的基礎上的選擇。它的工作原理，但只有當用戶點擊複選框的標籤。如果點擊該複選框，UL會按預期展開，但該框不會被檢查。

的Javascript：

jQuery(document).ready(function() 
    { 
    jQuery('.toggleUL').click(function() 
    { 
     var checkbox = jQuery(this).find('input'); 
     var ul  = jQuery(this).next('ul'); 

     if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); } 

     if (checkbox.attr('checked') == false) 
     { 
      checkbox.attr('checked', true); 
     } 
     else 
     { 
      checkbox.attr('checked', false); 
     } 


     ul.slideToggle('slow'); return false; 
    }); 
    }); 

HTML：

 <label class="toggleUL"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label> 
     <ul style="list-style-type: none; display: none"> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li> 
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li> 
     </ul> 

的的slideToggle（）函數不工作應該的方式。當盒子/標籤被點擊時，UL會立即展開然後收回。我可以停止的唯一方法是添加'返回false';這當然會導致複選框無法檢查。因此checkbox.attr（）。

破解了代碼，我知道。但是我怎樣才能讓複選框起作用？ >。 <

Answer 1

添加for="quoteWebsite"屬性標記

<label class="toggleUL" for="quoteWebsite"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label> 
    <ul style="list-style-type: none; display: none"> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li> 
    </ul> 

所以當標籤在用戶點擊後，會影響複選框，你只需要在複選框添加單擊事件處理程序。

jQuery(document).ready(function() 
{ 
    jQuery('#quoteWebsite').click(function() 
    { 
    var checkbox = jQuery(this); 
    var ul  = jQuery(this).closest('label').next('ul'); 

    if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); } 

    if (checkbox.attr('checked') == false) 
    { 
     checkbox.attr('checked', true); 
    } 
    else 
    { 
     checkbox.attr('checked', false); 
    } 


    ul.slideToggle('slow'); return false; 
    }); 
}); 

Answer 2

我建議你到Click事件直接連接到對應的複選框，並使用for屬性label元素上，以使其與複選框相關聯：

<input type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" /> 
<label for="quoteWebsite">xxx</label> 

我簡化代碼：

jQuery(function() { 
    jQuery('#quoteWebsite').click(function() { 
     var checkbox = jQuery(this), 
      ul = jQuery(this).siblings('ul'); 

     if (ul.css('display') == 'block') { 
      ul.find('input').attr('checked', false); 
     } 

     ul.slideToggle('slow'); 
    }); 
}); 

現在，由於點擊事件已附加到複選框，因此您無需手動處理checked屬性ggling也不取消該事件。

檢查上述示例here。

Answer 3

我建議您使用複選框的更改事件，因爲點擊事件在處理複選框時沒有跨瀏覽器。檢查以下討論JQuery Click versus Change

我注意到CMS的解決方案還有一件事是它有一個小問題。考慮以下情況： 例如，如果您選中複選框，則選項會展開，並且由於某種原因頁面會被刷新。主複選框將保持選中狀態，但其他選項會崩潰。然後你會陷入真正的衝突。當您取消選中複選框時，選項會展開，反之亦然。

下面你有修復。它更簡單，更清潔。檢查出來action。

<label for="quoteWebsite">xxx</label> 
<input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" /> 

    <ul id="options" style="list-style-type: none; display: none"> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" 
        value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" 
        value="xxx" />xxx</label></li> 
     <li style="margin-left: 20px"> 
      <label> 
       <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" 
        value="xxx" />xxx</label></li> 
    </ul> 




    $(document).ready(function(){ 

     $('#quoteWebsite').change(function(){    
      $('#options').slideToggle('slow'); 
     }); 

     if ($('#quoteWebsite').is(':checked')) { 
      $('#options').slideDown(); 
     } else { 
      $('#options').slideUp(); 
     } 
    });