Question

我正在制作一个可以通过复选框选择的选项列表。以下是小提琴的链接：http://jsfiddle.net/LESTN/2 enter code here

我能够在列表的一侧创建功能复选框，如图所示，但与列表元素关联的复选框不可单击。关于如何解决这个问题的任何建议都将不胜感激。

谢谢！

编辑：清除文本代码并添加小提琴。

Answer 1

    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })

删除return false;

http://jsfiddle.net/qdcH7/2/

此外，这看起来并不正确：<li>Hot Cups<ul>

此外，UL不应位于P标签内：ul element can never be a child of p element

Answer 2

好的，我能够复制这个问题。问题是返回虚假陈述。

    $('#expList').find('li:has(ul)').click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })

当您单击列表中的复选框时，该复选框被视为事件目标，但“this”是实际下拉列表，例如#expList。它返回false，除非（this == event.target），复选框上不是这种情况。

删除return false，或更改if语句处理值的方式。

另外，作为一般经验法则，请关闭所有标记并正确缩进HTML。你的HTML有点时髦，很多都是奇怪的格式化。也许是这样的？

<input type="checkbox" />
<div id="listContainer">
    <div id="expList">
        Hot Cups
             <ul>
                <li><input type="checkbox" name="Sample" value="val 1">Title 1</li>
                <li><input type="checkbox" name="Sample" value="val 2">Title 2</li>
                <li><input type="checkbox" name="Sample" value="val 3">Title 3</li>
                <li><input type="checkbox" name="Sample" value="val 4">Title 4</li>
                <li><input type="checkbox" name="Sample" value="val 5">Title 5</li>
                <li><input type="checkbox" name="Sample" value="val 6">Title 6</li>
                <li><input type="checkbox" name="Sample" value="val 7">Title 7</li>
            </ul>
      </div>
    </div>

复选框在折叠列表中不会被选中

2 个答案: