Js dynamically obtains the sub-complex option and designs the implementation method of full selection and submission. js Selects all options.

Js dynamically obtains the sub-complex option and designs the implementation method of full selection and submission. js Selects all options.

When creating a project, you will encounter a problem of dynamically obtaining sub-options based on the parent option and listing multiple check boxes. When submitting a project, the selected sub-options are merged into one character and submitted to the background.

This chapter describes how to implement this operation through js control:

1: the parent category is radio. The onclick event is added to each radio. The default Category 1 is the selected status.

<Input type = "checkbox" name = "selectall" id = "selectall" onClick = "selectAll (); "checked =" checked "/> select all <br> <input type =" radio "name =" lb "id =" lb "value =" 1 "onclick =" getZlb (1 ); "checked =" checked "/> Category 1 <input type =" radio "name =" lb "id =" lb "value =" 2 "onclick =" getZlb (2 ); "/> Category 2 <input type =" radio "name =" lb "id =" lb "value =" 3 "onclick =" getZlb (3); "/> Category 3

2: When the page is initially loaded, the child category should be displayed according to the selected parent category. When you click the button, you must also obtain the child category. Therefore, the method is written as the same, and called after page loading

window.onload=getZlb();

3. Obtain the js method of the subclass and dynamically obtain background data through ajax.

/*** Obtain the subcategory. After the page is loaded, the subcategory is displayed. */function getZlb () {// obtain var obj = document by name. getElementsByName ("lb"); for (var I = 0; I <obj. length; I ++) {if (obj [I]. checked) {getZlbNews (obj [I]. value) ;}} function getZlbNews () {(obtain map-type data through Ajax; return data in result, json format) var json = eval ("(" + result + ")"); // convert it to a json object // obtain the region var parent = document for the child type through ID. getElementById ('xsqy'); // leave the subarea empty to prevent parent from being appended next time. innerHTML = ''; var p = 0; var span =" "; // tick all the selected documents. getElementById ("selectall "). checked = true; for (var I in json) {p ++; span = "<SPAN style = \" display: inline-block; width: 75px; \ "> <input type = \" checkbox \ "checked = \" checked \ "onClick = \" checkSelectAll (); \ "name = \" zlb \ "value = \" "+ I +" \ ">" + json [I] + "</SPAN> "; // if the number of subcheck boxes exceeds 11, wrap the line if (p % 11 = 0) {span = span + "<br> ";} // append the subcheck boxes to the subarea parent one by one. innerHTML = parent. innerHTML + span ;}}

4: Background logic,

/*** Return Map <code, Name> * @ return */public String getZLb () {Map <Integer, String> zlb = service through subcategories. getZLB (); // convert map to json format JSON a = JSONSerializer. toJSON (zlb); return. toString ();}

5: js controls the selection of all, whether to select all logic, and how to merge the selected code when submitting

/*** Select all or cancel all */function selectAllDz () {var checkboxs = document. getElementsByName ("zlb"); for (var I = 0; I <checkboxs. length; I ++) {// check whether the checkboxs [I] subcategory is selected based on the selected button. checked = document. getElementById ("selectall "). checked;}/*** determines whether all sub-categories are selected. If all sub-categories are selected, the select button is selected. Otherwise, */function checkSelectAll () {var checkboxs = document is not selected. 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;}/*** concatenate the selected ID, separated by commas **/function getal=str (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: When performing the next step, such as submitting, convert all selected characters into one character and assign a value to a hidden text box for submission to the background.

// Call the concatenation ID method to pass the name of the element to be operated to var allZlb = getal1_str ('zlb'); // create a hidden text box, assign it to the background to obtain the document. getElementById ('allzlbstr '). value = allZlb;

The above is only for personal opinions. If you have better suggestions, please let us know.

The above is the JavaScript code provided by Alibaba Cloud for you to dynamically obtain sub-complex options and design all the selection and submission implementation methods ~