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}

然后，我可以创建一个下拉菜单，其中“Fruits”和“Vegetables”是唯一的两个选项。如果用户选择“Fruits”，那么JavaScript将检查“Apple”，“Orange”，“Banana”，“Lime”和“Lemon”，反之亦然。

用户应该仍然可以手动选择一个或几个复选框，这一点很重要，因此大量的复选框是必不可少的。

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

Answer 2

两个选择：

使用document.getElementById()选择您的复选框，您需要在每个复选框上设置不同 ID：

document.getElementById("box1")

或者将Jquery库添加到您的项目中，然后您可以简单地与

进行交互

$("#box1").attr("checked")

使用jquery，您的代码应该是

$("#dropmenuid").change(
function()
{
if (("#dropmenuid").val() == fruits)
   **check all the fruit boxes with id**
if (("#dropmenuid").val() == veg)
   **check all the veg boxes with id**    
});

祝你好运

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

2 个答案: