avant-propos

pas d'avant-propos

Astuce : ce qui suit est le texte de cet article, et les cas suivants sont pour référence

1. Demande

Réaliser tout désélectionner, tout sélectionner, inverser la sélection

Deux, code js

1. Options de rendu

S'il y a plusieurs éléments dans le tableau, plusieurs options seront rendues et ajoutées à form1 après avoir défini le style.

let input_arr;
        let p_arr=["Dior","Chanel","LV","YSL","Mac","TF"]
        let form2 = document.querySelector("#form2");
        let form1 = document.querySelector("#form1");

        function render() {
            for (let i = 0; i < p_arr.length; i++) {
                let input = document.createElement("input");
                let p=document.createElement("p");
                input.type = `checkbox`;
                input.style.marginRight=`15px`;
                p.innerHTML=`${p_arr[i]}`;
                form1.appendChild(p);
                form1.appendChild(input);
                input.style.marginTop=`20px`;
            }
           input_arr = document.querySelectorAll("[type='checkbox']");
        }
        render();

options de rendu

2. Réaliser la fonction

Utilisez la délégation d'événement pour lier le moniteur à form2, parcourez le tableau, entrez la branche correspondante, sélectionnez tout : si l'option n'est pas sélectionnée (false), alors la valeur cochée de l'option est (true), c'est-à-dire sélectionnée. Ne choisissez pas et inversez le choix comme ci-dessus.

  form2.addEventListener("click", function () {
            for (let item of input_arr) {
                switch (event.target.id) {
                    case "all":
                        item.checked == false ? item.checked = true : "";
                        break;
                    case "all_none":
                        item.checked == true ? item.checked = false : "";
                        break;
                    case "reverse":
                        item.checked == true ? item.checked = false : item.checked = true;
                        break;
                }
            }
        })

sélectionner une pièce