是否可以使用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 S和使用抓取所有在下拉列表中匹配的名稱，該元素的數組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**  
}); 

好運