gpt4 book ai didi

javascript - 可扩展列表形式的复选框/单选按钮无响应

转载 作者:行者123 更新时间:2023-11-28 03:25:43 24 4
gpt4 key购买 nike

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

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

我正在尝试使用找到的可扩展列表代码制作一个表单 here ,并且我的复选框和单选按钮没有响应或出现故障。他们都知道他们被按下了,当我点击他们时他们变成了沮丧的形象,但他们没有更新他们的值(value)。对于单选按钮,我可以单击一个按钮,它会起作用,但是该组中的其他按钮会变得没有响应。我有一个虚拟的 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;
}

最佳答案

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

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

making on-click events work with checkboxes

clicking on a div to check / uncheck a checkbox

关于javascript - 可扩展列表形式的复选框/单选按钮无响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21317618/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com