可扩展列表表单中的复选框/单选按钮无响应

Question

编辑回答：好的，所以这个问题似乎以前出现过。关键似乎在 js prepareList 函数中的return false; 语句中。我把它注释掉了，现在代码可以正常工作了。如需更多信息和更完整的答案，here 是该问题的先前版本。

编辑：这是一个重现错误的jsfiddle。

我正在尝试使用找到的可扩展列表代码 here 创建一个表单，而我的复选框和单选按钮要么没有响应，要么出现故障。他们都知道他们被按下了，当我点击他们时他们变成了沮丧的形象，但他们没有更新他们的价值。对于单选按钮，我可以单击一个并且它可以工作，但是该组中的其他人变得没有响应。我有一个虚拟 php 页面来打印表单的结果，但它似乎没有接收任何数据。注意：这是我的第一个网站项目，可能有一些非常明显的东西我只是错过了。 这是 HTML 的示例：

<div id="listContainer">
        <div class="listControl">
            <a id="expandList">Expand All</a>
            <a id="collapseList">Collapse All</a>
        </div>
        <form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
        <ul id="expList">
        <li>Section heading
            <ul>
            <li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
                <ul>
                <li>
                    <input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
                </li>
                </ul>
            </li>
            <li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
                <ul>
                <li>
                    <input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
                    <i>I have an option here
                    <input type="radio" name="Degs" value="Dec" form="ColForm">Option 1 
                    <input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
                    Text input 1<br>
                    <input type="text" name="RA" form="ColForm">deg<br>
                    Text input 2<br>
                    <input type="text" name="Dec" form="ColForm">deg<br>
                    <input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
                    <i>Text input A</i><br>
                    <input type="text" name="Area" form="ColForm"><br>
                </li>
                </ul>    
            </li>
            </ul>
        </li>
        </ul>
    <input type="submit" value="submit" form="ColForm">
    </form>
</div>

这是列表函数的 javascript：

/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button functionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    }) 
};

$(document).ready( function() {
    prepareList()
});

以及相关的 CSS： #listContainer{ 边距顶部：15px； }

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../img/expanded.png);
}
#expList {
    clear: both;
}

Answer 1

这里的问题在于您的代码中的event.preventDefault()。它使复选框/单选按钮无法执行其默认行为。删除该条目将允许输入标签正常运行。但它们将不再触发您正在寻找的展开和折叠功能。

你需要修改你的 JS 来监听复选框的点击。以下是一些可能对您有所帮助的类似情况：

making on-click events work with checkboxes

clicking on a div to check / uncheck a checkbox