{"id":92,"date":"2025-11-22T09:51:58","date_gmt":"2025-11-22T01:51:58","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=92"},"modified":"2025-11-22T09:51:58","modified_gmt":"2025-11-22T01:51:58","slug":"%e5%85%a8%e9%9d%a2%e8%a7%a3%e6%9e%90html5%e4%b8%adcheckbox%e6%a0%87%e7%ad%be","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/%e5%85%a8%e9%9d%a2%e8%a7%a3%e6%9e%90html5%e4%b8%adcheckbox%e6%a0%87%e7%ad%be\/","title":{"rendered":"\u5168\u9762\u89e3\u6790HTML5\u4e2dCheckbox\u6807\u7b7e"},"content":{"rendered":"\n

\u4e0b\u9762\u4e3a\u4f60\u63d0\u4f9b\u4e00\u4efd HTML5 \u4e2d Checkbox\uff08\u590d\u9009\u6846\uff09\u6700\u5168\u9762\u3001\u6700\u7cfb\u7edf\u7684\u89e3\u6790<\/strong>\uff0c\u6db5\u76d6\u6240\u6709\u5e38\u7528\u5c5e\u6027\u3001\u4e8b\u4ef6\u3001\u6837\u5f0f\u3001\u5206\u7ec4\u3001\u591a\u9009\u6846\u903b\u8f91\u3001\u5168\u9009\/\u53d6\u6d88\u5168\u9009\u3001\u7981\u7528\u72b6\u6001\u3001\u7f8e\u5316\u6280\u5de7\u3001\u53ef\u8fd0\u884c\u793a\u4f8b\uff0c\u4ee5\u53ca\u5f00\u53d1\u4e2d\u6700\u5e38\u89c1\u7684\u5751\u3002\u8bfb\u5b8c\u53ef\u76f4\u63a5\u7528\u4e8e\u5b9e\u6218\u5f00\u53d1\uff08\u79fb\u52a8\u7aef + PC\u7aef\uff09\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udfe9 \u4e00\u3001Checkbox \u662f\u4ec0\u4e48\uff1f<\/strong><\/h1>\n\n\n\n

\u5728 HTML5 \u4e2d\uff0c\u590d\u9009\u6846\u4f7f\u7528\uff1a<\/p>\n\n\n

\n&lt;input type="checkbox">\n\n<\/pre><\/div>\n\n\n
\u7528\u4e8e\u9009\u62e9 \u591a\u4e2a<\/strong> \u53ef\u9009\u9879\uff0c\u5141\u8bb8\u52fe\u9009 0\uff5eN \u4e2a\u3002<\/p>\n\n\n\n
\n\n\n\n
\ud83e\udde9 \u4e8c\u3001\u57fa\u672c\u8bed\u6cd5<\/strong><\/h1>\n\n\n
\n&lt;input type="checkbox" id="agree">\n&lt;label for="agree">\u6211\u5df2\u9605\u8bfb\u5e76\u540c\u610f\u534f\u8bae&lt;\/label>\n\n<\/pre><\/div>\n\n\n
    \n
  • \u901a\u8fc7 for<\/code> \u7ed1\u5b9a label<\/code> \u70b9\u51fb\u6587\u672c\u4e5f\u53ef\u9009\u4e2d<\/li>\n\n\n\n
  • \u6240\u6709 <input type=\"checkbox\"><\/code> \u9ed8\u8ba4\u662f\u72ec\u7acb\u7684<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \u2699\ufe0f \u4e09\u3001Checkbox \u5e38\u7528\u5c5e\u6027\u8be6\u89e3<\/strong><\/h1>\n\n\n\n
    \u5c5e\u6027<\/th>\u8bf4\u660e<\/th>\u793a\u4f8b<\/th><\/tr><\/thead>
    checked<\/code><\/td>\u9ed8\u8ba4\u9009\u4e2d<\/td><input type=\"checkbox\" checked><\/code><\/td><\/tr>
    disabled<\/code><\/td>\u7981\u7528\uff08\u4e0d\u53ef\u64cd\u4f5c\uff09<\/td><input disabled><\/code><\/td><\/tr>
    required<\/code><\/td>\u8868\u5355\u63d0\u4ea4\u5fc5\u987b\u81f3\u5c11\u9009\u4e00\u4e2a<\/td><input required><\/code><\/td><\/tr>
    name<\/code><\/td>\u63d0\u4ea4\u5b57\u6bb5\u540d<\/td><input name=\"hobby\"><\/code><\/td><\/tr>
    value<\/code><\/td>\u63d0\u4ea4\u503c<\/td><input value=\"run\"><\/code><\/td><\/tr>
    form<\/code><\/td>\u6307\u5b9a\u5c5e\u4e8e\u54ea\u4e2a <form><\/code><\/td><input form=\"form1\"><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u2714 \u590d\u9009\u6846 \u5fc5\u987b\u6709 name \u548c value<\/strong> \u624d\u80fd\u5728\u8868\u5355\u63d0\u4ea4\u4e2d\u627e\u5230\u52fe\u9009\u5185\u5bb9\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udfe8 \u56db\u3001Checkbox \u7684\u4e8b\u4ef6\uff08JS\uff09<\/strong><\/h1>\n\n\n\n
    \u4e8b\u4ef6<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    change<\/code><\/td>\u52fe\u9009\u72b6\u6001\u53d8\u5316\u89e6\u53d1\uff08\u6700\u5e38\u7528\uff09<\/td><\/tr>
    click<\/code><\/td>\u70b9\u51fb\u89e6\u53d1\uff08\u4f5c\u7528\u5c0f\u4e8e change\uff09<\/td><\/tr>
    input<\/code><\/td>\u90e8\u5206\u6d4f\u89c8\u5668\u517c\u5bb9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u793a\u4f8b\uff1a<\/p>\n\n\n
    \ndocument.getElementById("agree").addEventListener("change", function () {\n    console.log(this.checked);\n});\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udd22 \u4e94\u3001Checkbox \u5206\u7ec4\u4e0e\u591a\u9009<\/strong><\/h1>\n\n\n\n
    \u591a\u4e2a checkbox \u7684 name<\/code> \u4e00\u6837\uff0c\u5c31\u5c5e\u4e8e\u4e00\u4e2a\u7ec4\uff1a<\/p>\n\n\n
    \n&lt;input type="checkbox" name="hobby" value="read"> \u9605\u8bfb\n&lt;input type="checkbox" name="hobby" value="run"> \u8dd1\u6b65\n&lt;input type="checkbox" name="hobby" value="music"> \u97f3\u4e50\n\n<\/pre><\/div>\n\n\n
    \u63d0\u4ea4\u540e\u53f0\u5f97\u5230\uff1a<\/p>\n\n\n
    \n"hobby": ["read", "run"]\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udfe6 \u516d\u3001\u5b9e\u73b0\u201c\u5168\u9009 \/ \u5168\u4e0d\u9009 \/ \u53cd\u9009\u201d<\/strong><\/h1>\n\n\n\n
    \u8fd9\u662f checkbox \u6700\u5e38\u89c1\u529f\u80fd\u3002<\/p>\n\n\n\n
    \u2714 \u4ee3\u7801\u793a\u4f8b<\/h3>\n\n\n
    \n&lt;input type="checkbox" id="checkAll"> \u5168\u9009\n\n&lt;hr>\n\n&lt;input type="checkbox" class="item"> A\n&lt;input type="checkbox" class="item"> B\n&lt;input type="checkbox" class="item"> C\n\n&lt;script>\nconst all = document.getElementById("checkAll");\nconst items = document.querySelectorAll(".item");\n\nall.addEventListener("change", () => {\n    items.forEach(i => i.checked = all.checked);\n});\n\nitems.forEach(i => {\n    i.addEventListener("change", () => {\n        all.checked = [...items].every(i => i.checked);\n    });\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83c\udfa8 \u4e03\u3001Checkbox \u7684 CSS \u7f8e\u5316\u6280\u5de7<\/strong><\/h1>\n\n\n\n
    \u539f\u751f checkbox \u5f88\u96be\u76f4\u63a5\u7f8e\u5316\uff0c\u56e0\u6b64\u901a\u5e38\u4f7f\u7528\u201c\u9690\u85cf input + \u81ea\u5b9a\u4e49\u6837\u5f0f\u201d\u3002<\/p>\n\n\n\n
    \u2714 \u81ea\u5b9a\u4e49\u7f8e\u5316\u5b9e\u73b0\u65b9\u6cd5<\/h3>\n\n\n
    \n&lt;label class="cb">\n    &lt;input type="checkbox">\n    &lt;span class="box">&lt;\/span> \u81ea\u5b9a\u4e49\u6837\u5f0f\n&lt;\/label>\n\n&lt;style>\n.cb input {\n    display: none;\n}\n.cb .box {\n    width: 18px;\n    height: 18px;\n    border: 2px solid #666;\n    display: inline-block;\n    border-radius: 4px;\n    margin-right: 5px;\n    vertical-align: middle;\n}\n.cb input:checked + .box {\n    background: #4CAF50;\n    border-color: #4CAF50;\n}\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
    \u6548\u679c\uff1a\u7eff\u52fe\u98ce\u683c\u7684\u590d\u9009\u6846\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udcf1 \u516b\u3001\u79fb\u52a8\u7aef Checkbox \u6ce8\u610f\u70b9<\/strong><\/h1>\n\n\n\n
    \u95ee\u9898<\/th>\u89e3\u51b3\u65b9\u5f0f<\/th><\/tr><\/thead>
    \u591a\u6307\u89e6\u6478 \u201c\u70b9\u4e0d\u5230\u201d<\/td>click \u66ff\u6362\u6210 touchstart<\/td><\/tr>
    \u9009\u4e2d\u533a\u57df\u592a\u5c0f<\/td>\u4f7f\u7528 label \u6269\u5927\u70b9\u51fb\u8303\u56f4<\/td><\/tr>
    \u6837\u5f0f\u53d8\u5f62<\/td>\u4f7f\u7528 \u81ea\u5b9a\u4e49\u6837\u5f0f\uff08\u9690\u85cf\u539f\u751f\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \ud83e\uddea \u4e5d\u3001Checkbox \u8868\u5355\u9a8c\u8bc1<\/strong><\/h1>\n\n\n\n
    HTML5 \u539f\u751f\u9a8c\u8bc1\uff1a<\/p>\n\n\n
    \n&lt;input type="checkbox" required>\n\n<\/pre><\/div>\n\n\n
    \u82e5\u4e0d\u52fe\u9009\uff0csubmit \u4f1a\u81ea\u52a8\u963b\u6b62\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udd0d \u5341\u3001Checkbox \u4e0e JavaScript \u83b7\u53d6\u503c<\/strong><\/h1>\n\n\n\n
    1. \u83b7\u53d6\u662f\u5426\u9009\u4e2d\uff1a<\/h3>\n\n\n
    \ncheckbox.checked\n\n<\/pre><\/div>\n\n\n
    2. \u83b7\u53d6\u6240\u6709\u9009\u4e2d\u7684\u503c\uff1a<\/h3>\n\n\n
    \nconst values = [...document.querySelectorAll("input[name=hobby]:checked")]\n               .map(i => i.value);\nconsole.log(values);\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u26a0\ufe0f \u5341\u4e00\u3001Checkbox \u5e38\u89c1\u5751\u53ca\u89e3\u51b3<\/strong><\/h1>\n\n\n\n
    \u95ee\u9898<\/th>\u539f\u56e0<\/th>\u89e3\u51b3<\/th><\/tr><\/thead>
    \u70b9\u51fb label \u6ca1\u53cd\u5e94<\/td>for \u4e0e id \u4e0d\u4e00\u81f4<\/td>\u4fdd\u8bc1\u76f8\u540c<\/td><\/tr>
    \u9ed8\u8ba4\u52fe\u9009\u65e0\u6548<\/td>HTML \u4e2d\u5199\u9519\u4e3a checked=\"false\"<\/code><\/td>\u6539\u6210 checked<\/code><\/td><\/tr>
    \u81ea\u5b9a\u4e49\u6837\u5f0f\u5931\u6548<\/td>\u5fd8\u8bb0\u9690\u85cf input<\/td>\u7528 display:none<\/code><\/td><\/tr>
    \u8868\u5355\u63d0\u4ea4\u7f3a\u5c11\u5b57\u6bb5<\/td>\u5fd8\u5199 value \u6216 name<\/td>\u5fc5\u987b\u5199<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u2b50 \u5341\u4e8c\u3001\u5b8c\u6574\u53ef\u8fd0\u884c\u793a\u4f8b\uff08\u542b\u5168\u9009\u3001\u7f8e\u5316\u3001\u4e8b\u4ef6\uff09<\/h1>\n\n\n
    \n&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n&lt;meta charset="UTF-8">\n&lt;style>\n\/* \u81ea\u5b9a\u4e49\u7f8e\u5316 *\/\n.cb { display: flex; align-items: center; margin: 6px 0; }\n.cb input { display:none; }\n.cb .box {\n    width: 18px;\n    height: 18px;\n    border: 2px solid #777;\n    border-radius: 4px;\n    display: inline-block;\n    margin-right: 6px;\n    transition: .2s;\n}\n.cb input:checked + .box {\n    background: #2196F3;\n    border-color: #2196F3;\n}\n&lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n&lt;h3>Checkbox \u5b8c\u6574\u793a\u4f8b&lt;\/h3>\n\n&lt;label class="cb">\n    &lt;input type="checkbox" id="all">\n    &lt;span class="box">&lt;\/span> \u5168\u9009\n&lt;\/label>\n\n&lt;hr>\n\n&lt;label class="cb">\n    &lt;input type="checkbox" class="item" value="A">\n    &lt;span class="box">&lt;\/span> \u9009\u9879 A\n&lt;\/label>\n\n&lt;label class="cb">\n    &lt;input type="checkbox" class="item" value="B">\n    &lt;span class="box">&lt;\/span> \u9009\u9879 B\n&lt;\/label>\n\n&lt;label class="cb">\n    &lt;input type="checkbox" class="item" value="C">\n    &lt;span class="box">&lt;\/span> \u9009\u9879 C\n&lt;\/label>\n\n&lt;div id="show" style="margin-top:15px;">&lt;\/div>\n\n&lt;script>\nconst all = document.getElementById("all");\nconst items = document.querySelectorAll(".item");\nconst show = document.getElementById("show");\n\nall.addEventListener("change", () => {\n    items.forEach(i => i.checked = all.checked);\n    displayValues();\n});\n\nitems.forEach(i => {\n    i.addEventListener("change", () => {\n        all.checked = [...items].every(i => i.checked);\n        displayValues();\n    });\n});\n\nfunction displayValues() {\n    const values = [...document.querySelectorAll(".item:checked")]\n                   .map(i => i.value);\n    show.innerHTML = "\u9009\u4e2d\uff1a" + values.join(", ");\n}\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
    \u4e0b\u9762\u4e3a\u4f60\u63d0\u4f9b\u4e00\u4efd HTML5 \u4e2d Checkbox\uff08\u590d\u9009\u6846\uff09\u6700\u5168\u9762\u3001\u6700\u7cfb\u7edf\u7684\u89e3\u6790… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}