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}

次に、「果物」と「野菜」の2つのオプションのみを使用してドロップダウンを作成できます。ユーザーが「フルーツ」を選択すると、JavaScriptは「アップル」、「オレンジ」、「バナナ」、「ライム」、「レモン」をチェックし、その逆も同様です。

ユーザーが1つまたはいくつかのチェックボックスを手動で選択できるようにすることが重要であるため、チェックボックスの膨大なリストが不可欠です。

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

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

幸運を

于 2012-10-05T14:01:11.137 に答える