首頁 > 文章 > web前端 > 創建複選框的一些有效方法

創建複選框的一些有效方法

Patricia Arquette原創: 2024-10-20 06:25:02433瀏覽

Some effective ways to create checkboxes

建立複選框有 3 種方法：

透過直接html代碼
透過JS程式碼，建立每個元素、屬性、內容並將子元素appendChild到父元素
透過 JS 程式碼，帶有innerHTML 和模板文字

透過直接 html 程式碼：

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

透過JS程式碼，建立每個元素、屬性、內容並將子級appendChild到父級：

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

透過 JS 程式碼，帶有innerHTML 和範本文字：

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

以上是創建複選框的一些有效方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html checkbox JS innerHTML

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何自訂 PDF.js下一篇：如何自訂 PDF.js

看更多