Einige effektive Möglichkeiten zum Erstellen von Kontrollkästchen-js-Tutorial-php.cn

Einige effektive Möglichkeiten zum Erstellen von Kontrollkästchen

Patricia Arquette

Freigeben： 2024-10-20 06:25:02

Original

432 Leute haben es durchsucht

Some effective ways to create checkboxes

Es gibt drei Möglichkeiten, ein Kontrollkästchen zu erstellen:

Durch direkten HTML-Code
Erstellen Sie mit JS-Code alle Elemente, Attribute und Inhalte und hängen Sie das untergeordnete Kind an das übergeordnete Element an
Durch JS-Code, mit innerHTML und Template-Literal

Durch direkten HTML-Code:

<div>
  <input type="checkbox" name="color" id="red">
  <label for="red">Red</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="green">
  <label for="green">Green</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="Blue">
  <label for="Blue">Blue</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="yellow">
  <label for="yellow">Yellow</label>
 </div>

Nach dem Login kopieren

Erstellen Sie mit dem JS-Code alle Elemente, Attribute und Inhalte und hängen Sie das untergeordnete Kind an das übergeordnete Element an:

<body>
    <div id="root"></div>

    <script>
      const root = document.getElementById("root");
      const colors = ["Red", "Green", "Blue", "Yellow"];
      colors.forEach((color) => {
        // create id
        const id = color;

        // create label
        const label = document.createElement("label");
        label.setAttribute("for", id);

        // create checkbox input element
        const input = document.createElement("input");
        input.type = "checkbox";
        input.name = "color";
        input.id = id;
        input.value = color;

        // appendChild child to parent
        label.appendChild(input);
        label.appendChild(document.createTextNode(color));
        root.appendChild(label);
      });
    </script>
  </body>

Nach dem Login kopieren

Durch JS-Code, mit innerHTML und Template-Literal:

<body>
    <div id="root"></div>

    <script>
      const root = document.getElementById("root");
      const colors = ["Red", "Green", "Blue", "Yellow"];
      const checkbox = colors.map((color)=>`<label for="${color}">
        <input type="checkbox" name="color" id="${color}" value="${color}" >
        ${color}</label>
      `
    ).join("");

    root.innerHTML = checkbox;
    </script>
  </body>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinige effektive Möglichkeiten zum Erstellen von Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!