javascript - 是否可以使用 HTML 下拉菜单按 ID 选择复选框？

Question

我正在使用 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 将检查“苹果”、“橙子”、“香蕉”、“酸橙”和“柠檬”，反之亦然。

重要的是用户仍应能够手动选择一个或几个复选框，因此庞大的复选框列表必不可少。

Answer 1

想法是给你的复选框匹配 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;
      }
    }    
}

EXAMPLE