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