cari

Rumah >hujung hadapan web >tutorial js >Beberapa cara yang berkesan untuk membuat kotak pilihan

Beberapa cara yang berkesan untuk membuat kotak pilihan

Patricia Arquette
Patricia Arquetteasal
2024-10-20 06:25:02533semak imbas

Some effective ways to create checkboxes

Terdapat 3 cara untuk membuat kotak semak:

  1. Dengan kod html langsung
  2. Dengan kod JS, buat setiap elemen, atribut, kandungan dan tambahkan anak kepada ibu bapa
  3. Dengan kod JS, dengan innerHTML dan Templat literal

Dengan kod html langsung :

<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>

Dengan kod JS, buat setiap elemen, atribut, kandungan dan tambahkan anak kepada ibu bapa :

<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>

Dengan kod JS, dengan innerHTML dan Templat 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>

Atas ialah kandungan terperinci Beberapa cara yang berkesan untuk membuat kotak pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html checkbox JS innerHTML
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menyesuaikan PDF.jsArtikel seterusnya：Bagaimana untuk menyesuaikan PDF.js

Artikel berkaitan

Lihat lagi