0

我有一个表单设置，因此当您选中一个复选框时，相关的 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()。

破解代码，我知道。但是我怎样才能让复选框工作呢？>.<

4

3 回答 3

1

我建议您将单击事件直接附加到复选框，并使用元素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属性切换或取消事件。

在这里查看上面的例子。

于 2009-11-06T07:43:18.940 回答
0

将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;
  });
});
于 2009-11-06T07:40:37.733 回答
0

我建议您使用复选框的更改事件，因为在处理复选框时单击事件不是跨浏览器。检查以下讨论JQuery Click 与 Change

我在 CMS 的解决方案中注意到的另一件事是它有一个小问题。考虑以下场景：例如，如果您选中复选框，选项会扩展，并且由于某种原因页面会刷新。主复选框将保持选中状态，但其他选项将折叠。然后你就会陷入真正的冲突。当您取消选中该复选框时，选项会扩展，反之亦然。

下面你有修复。它更简单，更清洁。检查它的动作。

<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();
        }  
    });
于 2009-11-06T08:37:09.990 回答