1

我正在使用 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”,那么 JavaScript 将检查“Apple”、“Orange”、“Banana”、“Lime”和“Lemon”,反之亦然。

重要的是用户应该仍然能够手动选择一个或几个复选框,因此大量的复选框是必不可少的。

4

2 回答 2

2

这个想法是让您的复选框匹配names 并使用下拉列表中与名称匹配的所有元素的数组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;
      }
    }    
}

例子

于 2012-10-05T14:05:02.953 回答
1

两种选择:

用于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**    
});

祝你好运

于 2012-10-05T14:01:11.137 回答