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将展开然后立即缩回。我能让它停下来的唯一方法是添加'return false;'当然，这会导致复选框无法检查。因此，checkbox.attr（）。

黑客代码，我知道。但是如何让复选框工作？＆GT;。＆LT;

Answer 1

我建议您将点击事件直接附加到复选框，并使用label元素上的for属性将其与复选框相关联：

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

现在，由于click事件已附加到复选框，因此您无需手动处理checked属性切换或取消事件。

检查上面的示例here。

Answer 2

将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 3

我建议您使用复选框的更改事件，因为在处理复选框时，click事件不是跨浏览器。请查看以下讨论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();
        }  
    });

jQuery复选框没有检查

3 个答案: