프로젝트를 수행 할 때는 상위 옵션을 기반으로 자식 옵션을 동적으로 얻고 여러 확인란을 나열합니다. 제출할 때 선택한 것들을 하나의 캐릭터로 병합하여 배경으로 제출하십시오.
이 장에서는 JS Control을 통해이 작업을 구현하는 방법을 알려줍니다.
1 : 학부모 카테고리를 라디오로 설계하고 각 라디오에 on 클릭 이벤트를 추가하며 기본 범주 1이 선택 상태입니다.
<input type = "checkbox"name = "selectall"id = "selectall"onclick = "selectall ();"; Checked = "Checked"/> all <br> <input type = "radio"name = "lb"id = "lb"value = "1"onclick = "getzlb (1);"; Checked = "Checked"/> category 1 <입력 유형 = "radio"name = "lb"id = "lb"value = "2"onclick = "getzlb (2);"/> category 2 </> category 2 <입력 유형 = "radio"name = "lb"id = "lb"value = "3"onclick = "getzlb (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 = val ( "("+result+")"); // JSON 객체로 변환 // 하위 유형 var parent = document.getElementById ( 'xsqy')에서 표시 할 영역을 가져옵니다. // 하위 지역을 비우기 위해 부모를 방지하기 위해 비어 있습니다. innerhtml = ''; var p = 0; var span = ""; // 모든 문서를 확인하십시오 .getElementById ( "selectall"). checked = true; for (JSON의 var i) {p ++; span = "<span style =/"디스플레이 : 인라인-블록; 너비 : 75px;/"> <입력 유형 =/"checkbox/"checked =/"checked/"onclick =/"CheckSelectall ();/"name =/"zlb/"value =/" "+i+"/">"+json [i]+"</span>"; // 11 개 이상의 하위 체크 상자가 있으면 Newline if (p%11 == 0) {span = span+"<br>"; } // 하위 체크 상자를 하나씩 하위 필드 부모에 하나씩 추가합니다. }}4 : 배경 논리,
/ ** * 리턴 맵 형식 맵 <코드, 이름> * @return */ public String getzlb () {map <integer, string> zlb = service.getzlb (); // 맵을 JSON 형식으로 변환 json a = jsonserializer.tojson (ZLB); return A.ToString (); }5 : JS는 모두 선택할지 여부와 모두 선택 여부 및 제출시 선택된 코드를 병합하는 방법의 논리를 제어합니다.
/ ** * 모두를 선택하거나 모두 취소 */ 함수 selectAlldz () {var checkboxs = document.getElementsByName ( "ZLB"); for (var i = 0; i <checkboxs.length; i ++) {// 선택한 버튼이 선택되었는지 여부를 기준으로 하위 범주가 선택되었는지 여부를 제어합니다. }}/ ** * 선택한 모든 버튼을 선택한 경우 하위 카테고리가 모두 선택되었는지 여부를 결정하십시오. 그렇지 않으면 선택한 모든 버튼이 선택되지 않으면 */ 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 ( "selectall"). checked = false; } else {document.getElementById ( "selectall"). checked = true; }}/*** 선택한 ID를 스플으로 인해 쉼표로 분리*/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 : 다음 작업을 수행 할 때 제출하면 선택한 모든 문자로 바꾸고 숨겨진 텍스트 상자에 할당하여 배경에 제출하십시오.
// var allzlb = getAllIdstr ( 'Zlb')에서 작동 할 요소의 이름을 전달하고, 숨겨진 텍스트 상자를 만들고, 스 플린을 할당하고, document.getElementById ( 'allzlbstr'). value = allzlb;
위는 단지 개인적인 의견입니다. 더 나은 솔루션이 있으면 알려주십시오.
위의 내용은 하위 복합 옵션을 동적으로 얻고 모든 선택 및 제출물을 설계하는 구현 방법의 전체 내용입니다. 모두가 wulin.com을 더 지원하기를 바랍니다