Lorsque vous travaillez sur un projet, vous rencontrerez l'obtention dynamique des options d'enfants en fonction des options de parent et répertoriant plusieurs cases à cocher. Lors de la soumission, fusionnez les sélectionnés en un seul caractère et soumettez-les à l'arrière-plan.
Ce chapitre vous indiquera comment implémenter cette opération via JS Control:
1: Concevez la catégorie parent comme radio, ajoutez un événement OnClick à chaque radio, et la catégorie par défaut 1 est l'état de sélection.
<input type = "checkbox" name = "selectall" id = "selectall" onclick = "selectall ();" checked = "checked" /> sélectionnez all <br> <input type = "radio" name = "lb" id = "lb" value = "1" onclick = "getzlb (1);" checked = "checked" /> catégorie 1 <entrée type = "radio" name = "lb" id = "lb" value = "2" onclick = "getzlb (2);" /> catégorie 2 <entrée type = "radio" name = "lb" id = "lb" value = "3" onclick = "getzlb (3);" /> catégorie 3 3
2: Lorsque la page se charge initialement, la sous-catégorie doit être affichée en fonction de la catégorie parent sélectionnée. Lorsque vous cliquez sur le bouton, la sous-catégorie doit également être obtenue, elle est donc écrite comme la même méthode et appelée une fois le chargement de la page terminé.
window.onload = getzlb ();
3: Obtenez la méthode JS de la sous-catégorie, obtenez dynamiquement des données de fond via la méthode AJAX
/ ** * Obtenez une sous-catégorie et affichez-la une fois la charge de page terminée * / fonction getzlb () {// get var obj = document.getElementsByName ("lb"); for (var i = 0; i <obj.length; i ++) {if (obj [i] .checked) {getZlbNews (obj [i] .value); }}} fonction getZlbNews () {(obtenir des données de type de carte via ajax; return data in Result, json format) var json = eval ("(" + result + ")"); // Convertir en objet JSON // Afficher la zone par le sous-type var parent = document.getElementById ('xsqy'); // Mettez la sous-région vide pour empêcher Parent.innerHtml = ''; var p = 0; var span = ""; // vérifie tous les documents.getElementById ("selectall"). Checked = true; pour (var i dans json) {p ++; Span = "<Span Style = /" Affichage: Block en ligne; largeur: 75px; / "> <input type = /" checkbox / "checked = /" checked / "onclick = /" checkslectall (); / "name = /" zlb / "value = /" "+ i +" / ">" + json [i] + "</ span>"; // Lorsqu'il y a plus de 11 boîtes de sous-vérification, alors newline if (p% 11 == 0) {span = span + "<br>"; } // Ajouter des cases sous-vérifient une par une au sous-champ parent.innerhtml = parent.innerhtml + span; }}4: Logique d'arrière-plan,
/ ** * RETOUR MAP FORMAT MAP <Code, Name> * @return * / public String getZlb () {map <Integer, String> zlb = service.getzlb (); // Convertir la carte au format JSON JSON A = JSONSerializer.tojson (ZLB); retour a.toString (); }5: JS contrôle la logique de sélectionner tous, et s'il faut sélectionner tout, et comment fusionner le code sélectionné lors de la soumission
/ ** * Sélectionnez tout ou annulez tous les * / fonctions selectalldz () {var checkboxs = document.getElementsByName ("zlb"); for (var i = 0; i <checkboxs.length; i ++) {// Contrôlez si la sous-catégorie est sélectionnée en fonction de la sélection du bouton sélectionné pour contrôler les cases à cocher [i] .Checked = document.getElementById ("selectall"). }} / ** * Déterminez si la sous-catégorie est sélectionnée tous, si le bouton Sélectionné est sélectionné, sinon le bouton Sélectionné tout n'est pas sélectionné * / Fonction 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 les ID sélectionnés et les séparer avec des virgules * / fonction 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: Lors de l'exécution de l'opération suivante, si vous vous soumettez, transformez la toutes sélectionnées en un seul caractère et attribuez-la à une zone de texte cachée pour la soumettre à l'arrière-plan
// Appelez la méthode de l'ID d'épissage et passez le nom de l'élément à utiliser sur var allzlb = getAllidstr ('zlb'); // Créez une zone de texte cachée, attribuez-y l'épissé et utilisez-la pour obtenir document.getElementById ('allzlbStr'). Value = allzlb;Ce qui précède n'est qu'une opinion personnelle. Si vous avez de meilleures solutions, faites-le moi savoir.
Ce qui précède est le contenu complet de la méthode d'implémentation pour obtenir dynamiquement les options de sous-complexe et la conception de toutes les sélections et soumissions qui vous sont présentées. J'espère que tout le monde soutiendra Wulin.com plus ~