JS Dynamic acquisition of sub-complex options and design of the total selection and submission of implementation methods _javascript skills

In doing the project, you will encounter the parent option, dynamic access to the child options, and list more than one check box, submitted, the selected merged into a character to submit the background

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

1: The design parent category is radio, the onclick event is added for each radio, and the default Category 1 is the selected 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: At the beginning of the page load, according to the selected parent category display subcategories, click on the button, but also to get subcategories, so write the same method, and at the end of the page load after the call

WINDOW.ONLOAD=GETZLB ();

3: Get the JS method of the subcategory, and get the background data dynamically through the Ajax method

/** * Get subcategories and perform display/function getzlb () {//After the page is loaded) {//get var obj by name = Document.getelem
    Entsbyname ("lb");
      for (var i=0; i<obj.length; i + +) {if (obj[i].checked) {getzlbnews (obj[i].value); }} function Getzlbnews () {(Obtain data of map type via AJAX; return data is Result,json format) var json = eval ("(" +result+) ");//Convert to JSON
    Like//Get subtype by ID to show the area var Parent=document.getelementbyid (' xsqy ');
    The handle area is empty, prevents the next additional parent.innerhtml= ';
    var = =;
    var span= "";
    Tick the 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 the child check box exceeds 11, the newline if (p%11==0) {span=span+ "<br>";
    }//The Handle check box is appended to the sub area Parent.innerhtml=parent.innerhtml+span; } 
}

4: Background logic,

/**
   * Through subcategories, returns the MAP format map< code, name >
   * @return * * Public
  string getzlb () {
    Map<integer, string > zlb=service.getzlb ();
    Converts the map to JSON-formatted
    JSON a= Jsonserializer.tojson (ZLB);
    return a.tostring ();
  }

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

/** * Select all or Cancel/function Selectalldz () {var checkboxs = document.getelementsbyname ("ZLB"); for (var i=0 i<checkboxs.length; i++) {//to control whether the subcategory is selected based on the selected button or not checkboxs[i].checked = Document.getelementby
   Id ("SelectAll"). Checked; }/** * To determine whether the subcategory is all selected, the Select All button is selected, otherwise do not select the * * 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;
   }/** * Stitching the selected ID, comma-delimited **/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 the next operation, such as the submission, the selection into a character, assigned to a hidden text box, used to submit to the background

Call the Stitching ID method, the element to be manipulated to pass the name of the past
var allzlb=getallidstr (' zlb ');
Create a hidden text box and assign it to the background to get
document.getElementById (' Allzlbstr '). value=allzlb;

The above is only a personal humble opinion, if there is a better handling of suggestions, please inform.

The above is small set for everyone to bring the JS dynamic acquisition of the sub-complex options and design the full selection and submission of the implementation of all the content, I hope that we support cloud-Habitat Community ~