suchen

Heim >Web-Frontend >js-Tutorial >Einige effektive Möglichkeiten zum Erstellen von Kontrollkästchen

Einige effektive Möglichkeiten zum Erstellen von Kontrollkästchen

Patricia Arquette
Patricia ArquetteOriginal
2024-10-20 06:25:02529Durchsuche

Some effective ways to create checkboxes

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

  1. Durch direkten HTML-Code
  2. Erstellen Sie mit JS-Code alle Elemente, Attribute und Inhalte und hängen Sie das untergeordnete Kind an das übergeordnete Element an
  3. 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>

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>

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>

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!

html checkbox JS innerHTML
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So passen Sie PDF.js anNächster Artikel：So passen Sie PDF.js an

In Verbindung stehende Artikel

Mehr sehen