Question

I am looping through a list of Java Strings using JSP and generating HTML checkboxes for each String like so:

<%
while (st.hasMoreTokens())
{
    String object = st.nextToken();

    String temp = "<li><input type=\"checkbox\" id=\"" + object +
     "\" + name=\"type\" value =\"" + object + "\">" + object + "</li>";

    out.println(temp);
}
%>

However, because there are around 100 checkboxes, it would be time-consuming selecting ~40 options that the user wants to select. Instead, I’d like to create a drop-down menu that has custom hard-coded lists that would select the appropriate checkboxes.

For example, if I had a list of checkboxes as follows:

Apple
Orange
Banana
Pepper
Lime
Lemon
Peas

I could create custom lists like the following:

var fruit={Apple, Orange, Banana, Lime, Lemon}
var veg="{Pepper, Peas}

Then, I could create a drop-down with “Fruits” and “Vegetables” as the only two options. If the user selects “Fruits,” then JavaScript would check “Apple”, “Orange”, “Banana”, “Lime”, and “Lemon”, and vice versa.

It’s important that the user should still be able to select one or a few checkboxes manually, so the huge list of checkboxes is essential.

Answer 1

The idea is to give your checkboxes matching names and grab an array of all the elements that match the name in the dropdown using 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