プロジェクトに取り組むとき、親のオプションに基づいて子のオプションを動的に取得し、複数のチェックボックスをリストすることに遭遇します。提出するときは、選択したものを1つの文字にマージし、背景に送信します。
この章では、JSコントロールを介してこの操作を実装する方法について説明します。
1：親カテゴリをラジオとして設計し、各ラジオにオンクリックイベントを追加し、デフォルトのカテゴリ1が選択状態です。
<入力型= "チェックボックス" name = "selectal" id = "selectal" onclick = "selectal（）;" checked = "checked"/>すべて<br> <入力タイプ= "radio" name "lb" id = "lb" value = "1" onclick = "getzlb（1）;" checked = "checked"/>カテゴリ1 <入力タイプ= "radio" name = "lb" id = "lb" value = "2" onclick = "getzlb（2）;"/>カテゴリ2 <入力タイプ= "無線" lb "lb" id = "lb" value = "3" onclick = "getzlb（3）;"/>>カテゴリ3
2：最初にページが読み込まれている場合、選択した親カテゴリに従ってサブカテゴリを表示する必要があります。ボタンをクリックすると、サブカテゴリも取得する必要があるため、同じ方法として記述され、ページの読み込みが完了した後に呼び出されます。
window.onload = getzlb（）;
3：サブカテゴリのJSメソッドを取得し、AJAXメソッドを介して背景データを動的に取得します
/** *サブカテゴリを取得し、ページの読み込みが終了した後に表示します */function getzlb（）{// get var obj = document.getElementsbyname（ "lb"）; for（var i = 0; i <obj.length; i ++）{if（obj [i] .checked）{getzlbnews（obj [i] .value）; }}} function getzlbnews（）{（ajaxを介してマップタイプデータを取得、結果のデータを返す、json形式）var json = eval（ "（"+result+"）"）; // jsonオブジェクトに変換//サブタイプのvar parent = document.getElementById（ 'xsqy'）によって領域を表示します。 // parent.innerhtml = ''を防ぐために、サブ領域を空にします。 var p = 0; var span = ""; //すべてのdocument.getElementById（ "Selectal"）をチェックします。Checked= true; for（var i in json）{p ++; span = "<span style =/" display：inline-block;幅：75px;/"> <入力型=/"チェックボックス/"checked =/" checked/"onclick =/" checkselectall（）;/"name =/" zlb/"value =/" "+i+"/">"+json [i]+"</span>"; // 11を超えるサブチェックボックスがある場合、newline if（p％11 == 0）{span = span+"<br>"; } //サブチェックボックスをサブフィールドの親に1つずつ追加します。innerhtml= parent.innerhtml+span; }}4：背景ロジック、
/ ** * return Map Format Map <code、name> * @return */ public string getzlb（）{map <integer、string> zlb = service.getzlb（）; //マップをjson形式に変換しますjson a = jsonserializer.tojson（zlb）; a.toString（）を返します。 }5：JSは、すべてを選択するかどうか、すべてを選択するかどうか、および送信時に選択したコードをマージする方法のロジックを制御します
/ ** *すべてを選択するか、すべてをキャンセルします */ function selectaldz（）{var checkboxs = document.getelementsbyname（ "zlb"）; for（var i = 0; i <checkboxs.length; i ++）{//選択したボタンがすべて選択されているかどうかに基づいてサブカテゴリが選択されているかどうかを制御します[i]。Checked= document.getElementById（ "selectal"）。 }}/ ** *選択されたすべてのボタンが選択されている場合、選択されたすべてのボタンが選択されていない場合、サブカテゴリがすべて選択されているかどうかを判断します */ function checkselectall（）{var checkboxs = document.getelementsbyname（ "zlb"）; var isselectall = true; for（var i = 0; i <checkboxs.length; i ++）{if（checkboxs [i] .checked == false）{isselectall = false; }} if（isselectall == false）{document.getElementById（ "selectal"）。checked = false; } else {document.getElementById（ "selectal"）。checked = true; }}/***選択したidsをスプライスし、Commasで分離*/function getAllidStr（checkName）{var select = document.getElementsByName（checkName）; var idstr = new Array（）; for（var i = 0; i <select.length; i ++）{if（select [i] .checked == true）{idstr = idstr.concat（select [i] .value）; }} return idstr.join（ '、'）;}6：次の操作を実行するときは、送信する場合は、すべての選択肢を1つの文字に変え、非表示のテキストボックスに割り当てて背景に送信します
//スプライシングIDメソッドを呼び出し、var allzlb = getAllidStr（ 'zlb'）; //非表示のテキストボックスを作成し、スプライスを割り当ててdocument.getElementByID（ 'allzlbstr'）を取得するために使用して、varzlb = getAllidStr（ 'zlb'）; //操作する要素の名前を渡す
上記は単なる個人的な意見です。より良い解決策があれば、私に知らせてください。
上記は、サブコンプレックスオプションを動的に取得し、すべての選択と提出物を設計する実装方法の完全な内容です。誰もがwulin.comをもっとサポートすることを願っています〜