我正在使用 JSP 循环遍历 Java 字符串列表,并为每个字符串生成 HTML 复选框,如下所示:
<%
while (st.hasMoreTokens())
{
String object = st.nextToken();
String temp = "<li><input type=\"checkbox\" id=\"" + object +
"\" + name=\"type\" value =\"" + object + "\">" + object + "</li>";
out.println(temp);
}
%>
但是,由于大约有 100 个复选框,因此选择大约 40 个用户想要选择的选项将非常耗时。相反,我想创建一个下拉菜单,其中包含用于选择适当复选框的自定义硬编码列表。
例如,如果我有一个复选框列表如下:
Apple
Orange
Banana
Pepper
Lime
Lemon
Peas
我可以创建如下自定义列表:
var fruit={Apple, Orange, Banana, Lime, Lemon}
var veg="{Pepper, Peas}
然后,我可以创建一个下拉列表,将“水果”和“蔬菜”作为仅有的两个选项。如果用户选择“水果”,则 JavaScript 将检查“苹果”、“橙子”、“香蕉”、“酸橙”和“柠檬”,反之亦然。
重要的是用户仍应能够手动选择一个或几个复选框,因此庞大的复选框列表必不可少。
最佳答案
想法是给你的复选框匹配 name
并使用 document.getElementsByName()
获取与下拉列表中的名称匹配的所有元素的数组。
HTML
<select id="type" onChange="selectType();">
<option value=""></option>
<option value="fruit">Fruit</option>
<option value="vegs">Vegs</option>
</select>
<input type="checkbox" name="fruit" id="Apple">Apple</input>
<input type="checkbox" name="fruit" id="Orange">Orange</input>
<input type="checkbox" name="vegs" id="Carrot">Carrot</input>
<input type="checkbox" name="vegs" id="Peas">Peas</input>
JavaScript
function selectType(){
var el = document.getElementById("type");
if(el.value !== ""){
var type = document.getElementsByName(el.value);
for(var i = 0; i < type.length; i++){
type[i].checked = true;
}
}
}
关于javascript - 是否可以使用 HTML 下拉菜单按 ID 选择复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12747663/