Cuando trabaje en un proyecto, se encontrará con la obtención dinámica de las opciones infantiles en función de las opciones de los padres y enumerar múltiples casillas de verificación. Cuando envíe, fusione los seleccionados en un solo carácter y envíelos al fondo.
Este capítulo le dirá cómo implementar esta operación a través de JS Control:
1: Diseñe la categoría de padres como radio, agregue el evento OnClick a cada radio, y la categoría 1 predeterminada es el estado de selección.
<input type = "checkbox" name = "selectall" id = "selectall" onClick = "selectAll ();" checked = "checked"/> seleccione All <br> <input type = "radio" name = "lb" id = "lb" value = "1" onClick = "getzlb (1);" checked = "checked"/> categoría 1 <input type = "radio" name = "lb" id = "lb" value = "2" onClick = "getzlb (2);"/> categoría 2 <input type = "radio" name = "lb" id = "lb" value = "3" onClick = "getZlb (3);"/> categoría 3
2: Cuando la página se está cargando inicialmente, la subcategoría debe mostrarse de acuerdo con la categoría principal seleccionada. Al hacer clic en el botón, también se debe obtener la subcategoría, por lo que se escribe como el mismo método y se llama después de que se complete la carga de la página.
Window.Onload = getzlb ();
3: Obtenga el método JS de subcategoría, obtenga dinámicamente datos de fondo a través del método AJAX
/** * Get Subcategory y visualelo después de que la carga de la página esté finalizada */function getzlb () {// get var obj = document.getElementsByName ("lb"); for (var i = 0; i <obj.length; i ++) {if (obj [i] .ecked) {getzlbnews (obj [i] .value); }}} function getZlBNews () {(obtener datos de tipo de mapa a través de AJAX; return Data en el resultado, JSON Format) var json = eval ("("+resultado+")"); // Convertir al objeto JSON // Haga que el área se muestre por el subtipo var parent = document.getElementById ('xsqy'); // Ponga la subregión vacía para evitar parent.innerhtml = ''; var p = 0; var span = ""; // verifique todos los documentos.getElementById ("selectAll"). Checked = true; para (var i en json) {p ++; span = "<span style =/" Display: Inline-Block; Ancho: 75px;/"> <input type =/" checkBox/"checked =/" checked/"onClick =/" checkSelectall ();/"name =/" zlb/"valor =/" "+i+"/">"+json [i]+"</span>"; // Cuando hay más de 11 cuadros sub check, entonces newline if (p%11 == 0) {span = span+"<br>"; } // Agregar cajas de sub check uno por uno al subfield parent.innerhtml = parent.innerhtml+span; }}4: Lógica de fondo,
/ ** * return Map Format Map <Code, Name> * @Return */ public String getZlB () {map <integer, string> zlb = servicio.getzlb (); // Convertir el mapa en formato JSON JSON A = JSonserializer.tojson (ZLB); return A.ToString (); }5: JS controla la lógica de si se debe seleccionar todo, y si seleccionar todo, y cómo fusionar el código seleccionado al enviar
/ ** * Seleccione todo o cancele todo */ function selectAllDz () {var chechboxs = document.getElementsByName ("ZLB"); for (var i = 0; i <checkboxs.length; i ++) {// control si la subcategoría se selecciona en función de si el botón seleccionado se selecciona todo para controlar las casillas de verificación [i] .ecked = document.getElementById ("selectAll"). Checked; }}/ ** * Determine si la subcategoría está seleccionada todo, si se selecciona todo el botón seleccionado, de lo contrario, el botón todo seleccionado no está seleccionado */ function checkSelectall () {var de chechboxs = document.getElementsByName ("zlb"); var isselectall = true; for (var i = 0; i <checkboxs.length; i ++) {if (checkboxs [i] .ecked == false) {isSelectall = false; }} if (isselectall == false) {document.getElementById ("selectAll"). checked = false; } else {document.getElementById ("selectAll"). checked = true; }}/*** emplome los IDS seleccionados y los separe con comas*/function getAllidStr (checkName) {var select = document.getElementsByName (checkName); var idstr = new Array (); for (var i = 0; i <select.length; i ++) {if (select [i] .ecked == true) {idstr = idstr.concat (select [i] .value); }} return idstr.Join (',');}6: Al realizar la siguiente operación, si envía, gire todo seleccionado en un carácter y asigna a un cuadro de texto oculto para enviarlo al fondo
// Llame al método de ID de empalme y pase el nombre del elemento que se opere a través de var allzlb = getAllidStr ('zlb'); // Cree un cuadro de texto oculto, asigne el empalmado y úselo para obtener document.getElementById ('AllzlBstr'). Value = Allzlb;Lo anterior es solo una opinión personal. Si tiene mejores soluciones, hágamelo saber.
Lo anterior es el contenido completo del método de implementación para obtener dinámicamente opciones de subcomplex y diseñar todas las selecciones y presentaciones traídas a usted. Espero que todos apoyen a Wulin.com más ~