When working on a project, you will encounter dynamically obtaining child options based on the parent options and listing multiple check boxes. When submitting, merge the selected ones into one character and submit them to the background.
This chapter will tell you how to implement this operation through js control:
1: Design the parent category as radio, add onclick event to each radio, and default category 1 is the selection state.
<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 loading initially, the subcategory should be displayed according to the selected parent category. When clicking the button, the subcategory should also be obtained, so it is written as the same method and called after the page loading is completed.
window.onload=getZlb();
3: Get the js method of subcategory, dynamically obtain background data through the ajax method
/** * Get subcategory, and display it after the page load is finished */ 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(){ (get map type data through Ajax; return data in result,json format) var json = eval("("+result+")"); //Convert to json object//Get the area to be displayed by the subtype var parent=document.getElementById('xsqy'); //Put the sub-region empty to prevent parent.innerHTML=''; var p=0; var span=""; //Check all document.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>"; //When there are more than 11 sub-check boxes, then newline if(p%11==0){ span=span+"<br>"; } //Add sub-check boxes one by one to the sub-field parent.innerHTML=parent.innerHTML+span; } }4: Background logic,
/** * Return Map format Map<code, name> * @return */ public String getZLb(){ Map<Integer, String> zlb=service.getZLB(); //Convert map to json format JSON a= JSONSerializer.toJSON(zlb); return a.toString(); }5: js controls the logic of whether to select all, and whether to select all, 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++) { //Controll whether the subcategory is selected based on whether the selected button is selected all to control checkboxs[i].checked = document.getElementById("selectall").checked; } }/** * Determine whether the subcategory is selected all, if the selected all button is selected, otherwise the selected all button is not selected */ 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; } }/*** Splice the selected IDs and separate them with 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: When performing the next operation, if you submit, turn all selected into one character and assign it to a hidden text box to submit it to the background
//Call the splicing ID method and pass the name of the element to be operated over var allZlb=getAllIdStr('zlb');//Create a hidden text box, assign the spliced to it, and use it to obtain document.getElementById('allZlbStr').value=allZlb;The above is just a personal opinion. If you have any better solutions, please let me know.
The above is the full content of the implementation method of dynamically obtaining sub-complex options and designing all selections and submissions brought to you. I hope everyone will support Wulin.com more~