{"id":85625,"date":"2025-04-03T16:04:57","date_gmt":"2025-04-03T09:04:57","guid":{"rendered":"https:\/\/itviecblog.uptech.vn\/?p=85625"},"modified":"2025-06-17T09:25:57","modified_gmt":"2025-06-17T02:25:57","slug":"checkbox-html","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/checkbox-html\/","title":{"rendered":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Tong_quan_ve_checkbox_HTML\" >T\u1ed5ng quan v\u1ec1 checkbox HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Cach_de_thiet_lap_kich_thuoc_checkbox_trong_HTML_va_CSS\" >C\u00e1ch \u0111\u1ec3 thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc checkbox trong HTML v\u00e0 CSS\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Huong_dan_cach_them_checkbox_vao_bang_table_trong_HTML\" >H\u01b0\u1edbng d\u1eabn c\u00e1ch th\u00eam checkbox v\u00e0o b\u1ea3ng (table) trong HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Cach_tuy_chinh_checkbox_o_che_do_chi_doc_readonly_trong_HTML\" >C\u00e1ch t\u00f9y ch\u1ec9nh checkbox \u1edf ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly) trong HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Cac_cau_hoi_thuong_gap_ve_checkbox_HTML\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 checkbox HTML\u00a0\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/#Tong_ket_ve_checkbox_HTML\" >T\u1ed5ng k\u1ebft v\u1ec1 checkbox HTML<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong><em>Checkbox HTML gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f9ng l\u00fac, th\u01b0\u1eddng g\u1eb7p nhi\u1ec1u trong c\u00e1c bi\u1ec3u m\u1eabu (form). C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 ch\u00e8n checkbox v\u00e0o HTML, t\u1eeb c\u00e1ch c\u01a1 b\u1ea3n v\u1edbi th\u1ebb &lt;input&gt; \u0111\u1ebfn c\u00e1c ph\u01b0\u01a1ng ph\u00e1p n\u00e2ng cao nh\u01b0 s\u1eed d\u1ee5ng CSS v\u00e0 JavaScript \u0111\u1ec3 t\u00f9y ch\u1ec9nh giao di\u1ec7n v\u00e0 ch\u1ee9c n\u0103ng.<\/em><\/strong><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Checkbox trong HTML l\u00e0 g\u00ec?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch \u0111\u1ecbnh d\u1ea1ng chekcbox HTML bao g\u1ed3m c\u00e1c thao t\u00e1c t\u1ea1o m\u1edbi, t\u00f9y ch\u1ec9nh v\u00e0 thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch \u0111\u1ec3 th\u00eam checkbox v\u00e0o b\u1ea3ng t\u00ednh trong HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn c\u00e1ch c\u00e0i \u0111\u1eb7t checkbox HTML \u1edf ch\u1ebf \u0111\u1ed9 readonly<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p khi s\u1eed d\u1ee5ng checkbox trong HTML<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_quan_ve_checkbox_HTML\"><\/span><b>T\u1ed5ng quan v\u1ec1 checkbox HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p c\u01a1 b\u1ea3n c\u1ee7a checkbox trong HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;input type=\"checkbox\"&gt;\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Th\u1ebb n\u00e0y t\u1ea1o ra m\u1ed9t ph\u1ea7n t\u1eed \u0111\u1ea7u v\u00e0o c\u1ee7a checkbox, hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng m\u1ed9t h\u1ed9p vu\u00f4ng v\u00e0 \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u khi \u0111\u01b0\u1ee3c nh\u1ea5n v\u00e0o. Checkbox cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn t\u1eeb m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c l\u1ef1a ch\u1ecdn gi\u1edbi h\u1ea1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 sau \u0111\u00e2y s\u1ebd tr\u00ecnh b\u00e0y c\u00e1ch s\u1eed d\u1ee5ng checkbox HTML:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0HTML Input Type Checkbox<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/title&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h2 {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-align: center;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fieldset {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 250px;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: auto;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;HTML &amp;lt;input type=\"checkbox\"&amp;gt;&lt;\/h2&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;form action=\"#\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;fieldset&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;legend&gt;Select Your Subjects:&lt;\/legend&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"check\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"checkbox1\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"html\" checked&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"checkbox1\"&gt;HTML&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"check\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"checkbox2\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"css\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"checkbox2\"&gt;CSS&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"check\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"checkbox3\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"javascript\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"checkbox3\"&gt;JavaScript&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/fieldset&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/form&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85629\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-1-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"736\" height=\"297\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-1-vippro.jpg 736w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-1-vippro-300x121.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-1-vippro-640x258.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-1-vippro-200x81.jpg 200w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n m\u00e3 tr\u00ean l\u00e0 m\u1ed9t trang HTML \u0111\u01a1n gi\u1ea3n hi\u1ec3n th\u1ecb m\u1ed9t bi\u1ec3u m\u1eabu (form) v\u1edbi c\u00e1c checkbox \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u00f4n h\u1ecdc y\u00eau th\u00edch.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;form&gt;: <\/b><span style=\"font-weight: 400;\">T\u1ea1o bi\u1ec3u m\u1eabu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>action=&#8221;#&#8221;:<\/b><span style=\"font-weight: 400;\"> D\u1ea5u # ngh\u0129a l\u00e0 bi\u1ec3u m\u1eabu s\u1ebd kh\u00f4ng g\u1eedi d\u1eef li\u1ec7u \u0111i \u0111\u00e2u (ch\u1ec9 mang t\u00ednh minh h\u1ecda).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;fieldset&gt;: <\/b><span style=\"font-weight: 400;\">T\u1ea1o khung nh\u00f3m c\u00e1c checkbox.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;legend&gt;:<\/b><span style=\"font-weight: 400;\"> Ti\u00eau \u0111\u1ec1 cho nh\u00f3m checkbox (&#8220;Select Your Subjects:&#8221;).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1ed7i checkbox \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi th\u1ebb &lt;input type=&#8221;checkbox&#8221;&gt;, v\u00e0 \u0111i k\u00e8m v\u1edbi m\u1ed9t &lt;label&gt; gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng ch\u1ecdn checkbox b\u1eb1ng c\u00e1ch b\u1ea5m v\u00e0o v\u0103n b\u1ea3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>name=&#8221;check&#8221;:<\/b><span style=\"font-weight: 400;\"> C\u00f9ng m\u1ed9t t\u00ean gi\u00fap nh\u00f3m c\u00e1c checkbox l\u1ea1i v\u1edbi nhau, nh\u01b0ng checkbox v\u1eabn c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ch\u1ecdn \u0111\u1ed9c l\u1eadp.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>id=&#8221;checkbox1&#8243;, id=&#8221;checkbox2&#8243;, id=&#8221;checkbox3&#8243;:<\/b><span style=\"font-weight: 400;\"> M\u1ed7i checkbox c\u00f3 m\u1ed9t id duy nh\u1ea5t, gi\u00fap li\u00ean k\u1ebft v\u1edbi &lt;label&gt;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>value=&#8221;html&#8221;, value=&#8221;css&#8221;, value=&#8221;javascript&#8221;:<\/b><span style=\"font-weight: 400;\"> Khi checkbox \u0111\u01b0\u1ee3c ch\u1ecdn, gi\u00e1 tr\u1ecb n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111i khi bi\u1ec3u m\u1eabu \u0111\u01b0\u1ee3c submit.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>checked:<\/b><span style=\"font-weight: 400;\"> Checkbox \u0111\u1ea7u ti\u00ean (HTML) \u0111\u01b0\u1ee3c ch\u1ecdn m\u1eb7c \u0111\u1ecbnh.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Khi g\u1eedi bi\u1ec3u m\u1eabu, d\u1eef li\u1ec7u s\u1ebd bao g\u1ed3m c\u00e1c gi\u00e1 tr\u1ecb (HTML, CSS, JavaScript) c\u1ee7a nh\u1eefng checkbox \u0111\u00e3 ch\u1ecdn. CSS trong v\u00ed d\u1ee5 tr\u00ean \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh v\u00e0 \u0111\u1ecbnh d\u1ea1ng giao di\u1ec7n.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cach_de_thiet_lap_kich_thuoc_checkbox_trong_HTML_va_CSS\"><\/span><b>C\u00e1ch \u0111\u1ec3 thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc checkbox trong HTML v\u00e0 CSS\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a checkbox trong HTML ho\u1eb7c <\/span><strong><a href=\"\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a><\/strong><span style=\"font-weight: 400;\"> b\u1eb1ng m\u1ed9t s\u1ed1 c\u00e1ch nh\u01b0 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh width &#8211; height, thu\u1ed9c t\u00ednh transform ho\u1eb7c thu\u1ed9c t\u00ednh zoom.\u00a0<\/span><\/p>\n<h3><b>Thu\u1ed9c t\u00ednh width &#8211; height<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadp c\u00e1c thu\u1ed9c t\u00ednh chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao, b\u1ea1n c\u00f3 th\u1ec3 tr\u1ef1c ti\u1ebfp x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a checkbox. \u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch th\u1ef1c hi\u1ec7n, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o qua v\u00ed d\u1ee5 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input[type=\"checkbox\"] {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 20px;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 20px;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option1\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 1<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option2\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 2<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85630\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-2-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"447\" height=\"91\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-2-vippro.jpg 447w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-2-vippro-300x61.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-2-vippro-200x41.jpg 200w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>B\u1ed9 ch\u1ecdn input[type=\u201dcheckbox\u201d]:<\/b><span style=\"font-weight: 400;\"> Nh\u1eafm m\u1ee5c ti\u00eau \u0111\u1ebfn t\u1ea5t c\u1ea3 c\u00e1c \u0111\u1ea7u v\u00e0o checkbox.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thi\u1ebft l\u1eadp width: 20px v\u00e0 height: 20px:<\/b><span style=\"font-weight: 400;\"> S\u1ebd t\u0103ng k\u00edch th\u01b0\u1edbc checkbox l\u00ean 20\u00d720 pixel.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u1ea7n l\u01b0u \u00fd l\u00e0 m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t c\u0169 c\u00f3 th\u1ec3 kh\u00f4ng h\u1ed7 tr\u1ee3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc checkbox tr\u1ef1c ti\u1ebfp, nh\u01b0ng c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i (Chrome, Edge, Safari) \u0111\u1ec1u h\u1ed7 tr\u1ee3 t\u1ed1t.<\/span><\/p>\n<h3><b>Thu\u1ed9c t\u00ednh transform<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh transform: scale() s\u1ebd thay \u0111\u1ed5i t\u1ef7 l\u1ec7 c\u1ee7a checkbox m\u00e0 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i t\u1ef7 l\u1ec7 c\u1ee7a v\u0103n b\u1ea3n ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n xung quanh.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input[type=\"checkbox\"] {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transform: scale(1.5);<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 10px;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option1\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 1<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option2\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 2<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85631\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-3-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"468\" height=\"85\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-3-vippro.jpg 468w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-3-vippro-300x54.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-3-vippro-200x36.jpg 200w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, ta c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thu\u1ed9c t\u00ednh transform:<\/b><span style=\"font-weight: 400;\"> scale(1.5) gi\u00fap ph\u00f3ng to checkbox l\u00ean 1,5 l\u1ea7n k\u00edch th\u01b0\u1edbc ban \u0111\u1ea7u c\u1ee7a n\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u00eam margin:<\/b><span style=\"font-weight: 400;\"> 10px \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o kho\u1ea3ng c\u00e1ch th\u00edch h\u1ee3p xung quanh checkbox. V\u00ec khi ph\u00f3ng to, checkbox c\u00f3 th\u1ec3 b\u1ecb ch\u1ed3ng ch\u00e9o v\u1edbi c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c n\u1ebfu kh\u00f4ng c\u00f3 kho\u1ea3ng c\u00e1ch.<\/span><\/li>\n<\/ul>\n<h3><b>Thu\u1ed9c t\u00ednh zoom<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh zoom c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a checkbox, c\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input[type=\"checkbox\"] {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0zoom: 1.5;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 10px;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option1\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 1<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;label&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"option2\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Option 2<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85632\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-4-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"493\" height=\"90\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh zoom: 1.5 gi\u00fap t\u0103ng k\u00edch th\u01b0\u1edbc checkbox l\u00ean 1,5 l\u1ea7n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">L\u01b0u \u00fd r\u1eb1ng thu\u1ed9c t\u00ednh zoom kh\u00f4ng ph\u1ea3i l\u00e0 chu\u1ea9n v\u00e0 c\u00f3 th\u1ec3 kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t. Ch\u1eb3ng h\u1ea1n nh\u01b0 Firefox kh\u00f4ng h\u1ed7 tr\u1ee3 t\u1ed1t thu\u1ed9c t\u00ednh n\u00e0y.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_cach_them_checkbox_vao_bang_table_trong_HTML\"><\/span><b>H\u01b0\u1edbng d\u1eabn c\u00e1ch th\u00eam checkbox v\u00e0o b\u1ea3ng (table) trong HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Th\u00eam checkbox v\u00e0o <\/span><a href=\"\/blog\/table-html\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">table HTML<\/span><\/a><span style=\"font-weight: 400;\"> (b\u1ea3ng HTML) c\u1ea7n thi\u1ebft trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p kh\u00e1c nhau, ch\u1eb3ng h\u1ea1n nh\u01b0 ch\u1ecdn nhi\u1ec1u h\u00e0ng \u0111\u1ec3 x\u1eed l\u00fd h\u00e0ng lo\u1ea1t ho\u1eb7c chuy\u1ec3n \u0111\u1ed5i tr\u1ea1ng th\u00e1i c\u1ee7a t\u1eebng m\u1ee5c. \u0110\u1ec3 th\u00eam checkbox v\u00e0o m\u1ed7i h\u00e0ng c\u1ee7a b\u1ea3ng trong HTML, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;Table with Checkboxes&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0table {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: auto;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;table border=\"1\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Select&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Name&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Email&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" name=\"select\"&gt;&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;XYZ&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;xyz@itviec.com\/blog&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" name=\"select\"&gt;&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;ABC&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;abc@itviec.com\/blog&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/table&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85633\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-5-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"421\" height=\"153\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-5-vippro.jpg 421w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-5-vippro-300x109.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-5-vippro-200x73.jpg 200w\" sizes=\"auto, (max-width: 421px) 100vw, 421px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean cho th\u1ea5y c\u00e1ch th\u1ef1c hi\u1ec7n ch\u00e8n checkbox v\u00e0o m\u1ed7i h\u00e0ng trong b\u1ea3ng HTML nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Th\u00eam m\u1ed9t c\u1ed9t m\u1edbi c\u00f3 ti\u00eau \u0111\u1ec1 &#8220;Ch\u1ecdn&#8221; (Select) \u0111\u1ec3 ch\u1ee9a c\u00e1c checkbox.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">B\u00ean trong m\u1ed7i h\u00e0ng, b\u00ean d\u01b0\u1edbi c\u1ed9t &#8220;Ch\u1ecdn&#8221;, ch\u00e8n m\u1ed9t ph\u1ea7n t\u1eed &lt;input&gt; v\u1edbi thu\u1ed9c t\u00ednh type \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh &#8220;checkbox&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh name \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh &#8220;select&#8221; cho t\u1ea5t c\u1ea3 c\u00e1c checkbox, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c t\u00ean kh\u00e1c nhau n\u1ebfu c\u1ea7n \u0111\u1ec3 g\u1eedi bi\u1ec3u m\u1eabu ho\u1eb7c thao t\u00e1c JavaScript.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n th\u00eam checkbox \u201cCh\u1ecdn t\u1ea5t c\u1ea3\u201d \u0111\u1ec3 ch\u1ecdn ho\u1eb7c b\u1ecf ch\u1ecdn t\u1ea5t c\u1ea3 t\u00f9y ch\u1ecdn trong b\u1ea3ng m\u1ed9t c\u00e1ch linh ho\u1ea1t b\u1eb1ng <\/span><a href=\"\/blog\/javascript-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">JavaScript<\/span><\/a><span style=\"font-weight: 400;\">. C\u00e1ch th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Dynamic Table with Checkboxes&lt;\/title&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0table {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: auto;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;script&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function toggle(source) {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let checkboxes = document<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.querySelectorAll('input[type=\"checkbox\"]');<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (let i = 0; i &lt; checkboxes.length; i++) {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (checkboxes[i] !== source)<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0checkboxes[i].checked = source.checked;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/script&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;table border=\"1\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;&lt;input type=\"checkbox\" onclick=\"toggle(this)\"&gt;&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Name&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Email&lt;\/th&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" name=\"select\"&gt;&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;XYZ&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;xyz@itviec.com\/blog&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" name=\"select\"&gt;&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;ABC&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;abc@itviec.com\/blog&lt;\/td&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/table&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85634\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-6-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"400\" height=\"157\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Th\u00eam checkbox &#8220;Ch\u1ecdn t\u1ea5t c\u1ea3&#8221; v\u00e0o h\u00e0ng ti\u00eau \u0111\u1ec1 c\u1ee7a b\u1ea3ng b\u1eb1ng c\u00e1ch ch\u00e8n ph\u1ea7n t\u1eed &lt;input&gt; c\u00f3 thu\u1ed9c t\u00ednh ki\u1ec3u \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh &#8220;checkbox&#8221; trong ph\u1ea7n t\u1eed &lt;th&gt; \u0111\u1ea7u ti\u00ean.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a m\u1ed9t h\u00e0m JavaScript toggle(source) l\u1ea5y checkbox &#8220;Ch\u1ecdn t\u1ea5t c\u1ea3&#8221; l\u00e0m tham s\u1ed1 ngu\u1ed3n. H\u00e0m n\u00e0y l\u1eb7p l\u1ea1i t\u1ea5t c\u1ea3 c\u00e1c checkbox trong b\u1ea3ng v\u00e0 \u0111\u1eb7t thu\u1ed9c t\u00ednh checked c\u1ee7a ch\u00fang \u0111\u1ec3 kh\u1edbp v\u1edbi thu\u1ed9c t\u00ednh checked c\u1ee7a h\u1ed9p ki\u1ec3m ngu\u1ed3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh onclick c\u1ee7a checkbox &#8220;Ch\u1ecdn t\u1ea5t c\u1ea3&#8221; \u0111\u01b0\u1ee3c \u0111\u1eb7t \u0111\u1ec3 g\u1ecdi h\u00e0m toggle(this), truy\u1ec1n ch\u00ednh h\u1ed9p ki\u1ec3m l\u00e0m \u0111\u1ed1i s\u1ed1.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cach_tuy_chinh_checkbox_o_che_do_chi_doc_readonly_trong_HTML\"><\/span><b>C\u00e1ch t\u00f9y ch\u1ec9nh checkbox \u1edf ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly) trong HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u00e0i \u0111\u1eb7t ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly) cho checkbox, b\u1ea1n kh\u00f4ng th\u1ec3 th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh HTML chu\u1ea9n. Do \u0111\u00f3, s\u1ebd c\u1ea7n s\u1eed d\u1ee5ng nh\u1eefng c\u00e1ch ti\u1ebfp c\u1eadn thay th\u1ebf nh\u01b0 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh disabled ho\u1eb7c c\u00e1c thu\u1ed9c t\u00ednh CSS nh\u01b0 pointer-events c\u00f3 th\u1ec3 m\u00f4 ph\u1ecfng h\u00e0nh vi ch\u1ec9 \u0111\u1ecdc cho h\u1ed9p ki\u1ec3m.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng t\u00f9y ch\u1ecdn b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a (disabled option)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c onclick.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh pointer-events.<\/span><\/li>\n<\/ul>\n<h3><b>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh disabled<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh disabled s\u1ebd s\u1eed d\u1ee5ng t\u00f9y ch\u1ecdn b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a v\u1edbi th\u1ebb \u0111\u1ea7u v\u00e0o bi\u1ec3u di\u1ec5n c\u00e1c h\u1ed9p ki\u1ec3m. Khi t\u00f9y ch\u1ecdn b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a \u0111\u01b0\u1ee3c th\u00eam v\u00e0o th\u1ebb \u0111\u1ea7u v\u00e0o, checkbox s\u1ebd b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 xem h\u1ed9p ki\u1ec3m nh\u01b0ng kh\u00f4ng th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi n\u00f3. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u00f9y ch\u1ecdn &#8216;\u0111\u00e3 ch\u1ecdn&#8217; v\u00e0 l\u1ea5y h\u1ed9p ki\u1ec3m ch\u1ec9 \u0111\u1ecdc \u0111\u00e3 \u0111\u01b0\u1ee3c ch\u1ecdn nh\u01b0ng kh\u00f4ng th\u1ec3 b\u1ecf ch\u1ecdn.<\/span><\/p>\n<pre>&lt;input name=\"example\" type=\"checkbox\" disabled value=\"1\" \/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 sau \u0111\u00e2y s\u1ebd cho th\u1ea5y c\u00e1ch hi\u1ec3n th\u1ecb hai hai checkbox ch\u1ec9 \u0111\u1ecdc b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng disabled:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;checkboxes be set to readonly&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h1 style=\"color: red; margin: 2rem\"&gt;<\/span>\n<span style=\"font-weight: 400;\">ITviec<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h1&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h3 style=\"margin: 2rem; margin-top: -1.5rem\"&gt;<\/span>\n<span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t checkbox \u1edf ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly)?<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h3&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div style=\"margin: 2rem;\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_1\" type=\"checkbox\"<\/span>\n<span style=\"font-weight: 400;\">disabled value=\"1\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled unchecked option<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div style=\"margin: 2rem;\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_2\" type=\"checkbox\"<\/span>\n<span style=\"font-weight: 400;\">disabled checked value=\"1\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_2\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled checked option<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85635\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-7-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"763\" height=\"303\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-7-vippro.jpg 763w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-7-vippro-300x119.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-7-vippro-640x254.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-7-vippro-200x79.jpg 200w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n code tr\u00ean hi\u1ec3n th\u1ecb hai checkbox trong tr\u1ea1ng th\u00e1i ch\u1ec9 \u0111\u1ecdc (kh\u00f4ng th\u1ec3 thay \u0111\u1ed5i) v\u00e0 \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng disable option.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;input type=&#8221;checkbox&#8221; name=&#8221;chkBox_1&#8243; disabled value=&#8221;1&#8243;&gt;:<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 m\u1ed9t checkbox v\u1edbi name l\u00e0 chkBox_1. Thu\u1ed9c t\u00ednh disabled khi\u1ebfn checkbox b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a (ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 t\u01b0\u01a1ng t\u00e1c).\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>value=&#8221;1&#8243;:<\/b><span style=\"font-weight: 400;\"> N\u1ebfu checkbox c\u00f3 th\u1ec3 ch\u1ecdn, gi\u00e1 tr\u1ecb c\u1ee7a n\u00f3 s\u1ebd l\u00e0 &#8220;1&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;label for=&#8221;chkBox_1&#8243;&gt;Disabled unchecked option&lt;\/label&gt;<\/b><span style=\"font-weight: 400;\">: Nh\u00e3n hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef &#8220;Disabled unchecked option&#8221;. for=&#8221;chkBox_1&#8243; gi\u00fap nh\u1ea5p v\u00e0o nh\u00e3n s\u1ebd ch\u1ecdn checkbox, nh\u01b0ng v\u00ec checkbox b\u1ecb disabled, n\u00ean kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00f3 th\u00eam checked:<\/b><span style=\"font-weight: 400;\"> Checkbox n\u00e0y m\u1eb7c \u0111\u1ecbnh \u0111\u01b0\u1ee3c ch\u1ecdn (checked).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>V\u1eabn c\u00f3 disabled:<\/b><span style=\"font-weight: 400;\"> Ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i checkbox n\u00e0y.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Checkbox v\u1edbi disabled kh\u00f4ng th\u1ec3 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i, ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 t\u00edch ho\u1eb7c b\u1ecf t\u00edch. Kh\u00f4ng c\u00f3 readonly cho checkbox trong HTML, readonly ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng v\u1edbi &lt;input type=&#8221;text&#8221;&gt;, &lt;textarea&gt;. Checkbox ch\u1ec9 c\u00f3 th\u1ec3 v\u00f4 hi\u1ec7u h\u00f3a b\u1eb1ng disabled.<\/span><\/p>\n<h3><b>S\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p onclick\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Onclick method s\u1ebd s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c onclick v\u1edbi th\u1ebb input bi\u1ec3u di\u1ec5n c\u00e1c checkbox. Khi ph\u01b0\u01a1ng th\u1ee9c on-click \u0111\u01b0\u1ee3c th\u00eam v\u00e0o th\u1ebb input v\u00e0 \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh gi\u00e1 tr\u1ecb \u201creturn false\u201d th\u00ec checkbox v\u1ec1 c\u01a1 b\u1ea3n b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 xem checkbox nh\u01b0ng kh\u00f4ng th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi n\u00f3.<\/span><\/p>\n<pre><b>&lt;input type=\"checkbox\" onclick=\"return false\"\/&gt;<\/b><\/pre>\n<p>V\u00ed d\u1ee5:<\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;Checkbox Set to Readonly with onclick&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h1 style=\"color: red; margin: 2rem\"&gt;<\/span>\n<span style=\"font-weight: 400;\">ITviec<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h1&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h3 style=\"margin: 2rem; margin-top: -1.5rem\"&gt;<\/span>\n<span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly) cho checkbox?<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h3&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div style=\"margin: 2rem;\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_1\" type=\"checkbox\"<\/span>\n<span style=\"font-weight: 400;\">onclick=\"return false\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled unchecked option with Onclick method<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div style=\"margin: 2rem;\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_2\" type=\"checkbox\"<\/span>\n<span style=\"font-weight: 400;\">onclick=\"return false\" checked \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_2\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled checked option with onclick method<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;\n<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 tr\u00ean \u0111\u00e3 t\u1ea1o ra hai checkbox ch\u1ec9 \u0111\u1ecdc b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng JavaScript (onclick=&#8221;return false&#8221;). Kh\u00f4ng s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh disabled, do \u0111\u00f3 gi\u00e1 tr\u1ecb c\u1ee7a checkbox v\u1eabn s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi khi form submit.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kh\u00f4ng c\u00f3 disabled, n\u00ean gi\u00e1 tr\u1ecb checkbox v\u1eabn \u0111\u01b0\u1ee3c g\u1eedi khi form submit.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>onclick=&#8221;return false&#8221;:<\/b><span style=\"font-weight: 400;\"> Ch\u1eb7n s\u1ef1 ki\u1ec7n click d\u1eabn \u0111\u1ebfn ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng th\u1ec3 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i c\u1ee7a checkbox.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;label for=&#8221;chkBox_1&#8243;&gt;<\/b><span style=\"font-weight: 400;\"> gi\u00fap nh\u00e3n li\u00ean k\u1ebft v\u1edbi checkbox, nh\u01b0ng do checkbox b\u1ecb ch\u1eb7n click, n\u00ean nh\u1ea5n v\u00e0o nh\u00e3n c\u0169ng kh\u00f4ng thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Checkbox v\u1edbi onclick=&#8221;return false&#8221; ho\u1ea1t \u0111\u1ed9ng nh\u01b0 readonly, kh\u00f4ng th\u1ec3 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i khi click nh\u01b0ng gi\u00e1 tr\u1ecb v\u1eabn \u0111\u01b0\u1ee3c g\u1eedi khi form submit. So v\u1edbi disabled, onclick=&#8221;return false&#8221; linh ho\u1ea1t h\u01a1n, v\u00ec gi\u1eef l\u1ea1i d\u1eef li\u1ec7u khi submit form.<\/span><\/p>\n<h3><b>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh pointer-events<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh pointer-events s\u1ebd s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh CSS pointer-events cho th\u1ebb input bi\u1ec3u di\u1ec5n c\u00e1c checkbox. Khi thu\u1ed9c t\u00ednh CSS n\u00e0y \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o thi\u1ebft k\u1ebf cho th\u1ebb input, checkbox v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 ch\u1ec9 \u0111\u1ecdc \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 xem checkbox nh\u01b0ng kh\u00f4ng th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi n\u00f3.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">input[type=\"checkbox\"]{<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0pointer-events: none;<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">pointer-events \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ki\u1ec3m so\u00e1t c\u00e1ch m\u1ed9t ph\u1ea7n t\u1eed ph\u1ea3n h\u1ed3i l\u1ea1i t\u01b0\u01a1ng t\u00e1c c\u1ee7a ng\u01b0\u1eddi d\u00f9ng v\u1edbi thi\u1ebft b\u1ecb tr\u1ecf, x\u00e1c \u0111\u1ecbnh xem n\u00f3 c\u00f3 n\u00ean nh\u1eadn c\u00e1c s\u1ef1 ki\u1ec7n con tr\u1ecf hay kh\u00f4ng.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;title&gt;Checkbox Set to Readonly with pointer-events&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n<span style=\"font-weight: 400;\">input[type=\"checkbox\"] {<\/span>\n<span style=\"font-weight: 400;\">pointer-events: none;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.head1 {<\/span>\n<span style=\"font-weight: 400;\">color: red;<\/span>\n<span style=\"font-weight: 400;\">margin: 2rem;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.head2 {<\/span>\n<span style=\"font-weight: 400;\">margin: 2rem;<\/span>\n<span style=\"font-weight: 400;\">margin-top: -1.5rem;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.div1 {<\/span>\n<span style=\"font-weight: 400;\">margin-top: 2rem;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.div2 {<\/span>\n<span style=\"font-weight: 400;\">margin-top: 2rem;<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h1 class=\"head1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">ITviec<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h1&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;h3 class=\"head2\"&gt;<\/span>\n<span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t ch\u1ebf \u0111\u1ed9 ch\u1ec9 \u0111\u1ecdc (readonly) cho checkbox?<\/span>\n<span style=\"font-weight: 400;\">&lt;\/h3&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div class=\"div1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_1\" type=\"checkbox\" \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled unchecked option with <\/span>\n<span style=\"font-weight: 400;\">Pointer-events<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;div class=\"div1\"&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;input name=\"chkBox_2\" type=\"checkbox\"<\/span>\n<span style=\"font-weight: 400;\">checked \/&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;label for=\"chkBox_2\"&gt;<\/span>\n<span style=\"font-weight: 400;\">Disabled checked option with <\/span>\n<span style=\"font-weight: 400;\">Pointer-events<\/span>\n<span style=\"font-weight: 400;\">&lt;\/label&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean \u0111\u00e3 t\u1ea1o giao di\u1ec7n v\u1edbi hai checkbox kh\u00f4ng th\u1ec3 nh\u1ea5p v\u00e0o b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CSS (pointer-events: none;). B\u1eb1ng c\u00e1ch kh\u00f4ng d\u00f9ng disabled ho\u1eb7c onclick=&#8221;return false&#8221;, nh\u01b0ng v\u1eabn ng\u0103n ng\u01b0\u1eddi d\u00f9ng thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i checkbox.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>pointer-events: none<\/b><span style=\"font-weight: 400;\">: Ch\u1eb7n s\u1ef1 ki\u1ec7n click c\u1ee7a checkbox, khi\u1ebfn n\u00f3 tr\u1edf th\u00e0nh &#8220;readonly&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00e1c class .head1, .head2, .div1:<\/b><span style=\"font-weight: 400;\"> D\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh v\u1ecb tr\u00ed c\u00e1c ph\u1ea7n t\u1eed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;input type=&#8221;checkbox&#8221; name=&#8221;chkBox_1&#8243;&gt;: <\/b><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 checkbox m\u1eb7c \u0111\u1ecbnh ch\u01b0a \u0111\u01b0\u1ee3c ch\u1ecdn. V\u1eabn g\u1eedi gi\u00e1 tr\u1ecb khi submit form v\u00ec kh\u00f4ng d\u00f9ng disabled. Kh\u00f4ng th\u1ec3 nh\u1ea5p v\u00e0o do b\u1ecb CSS pointer-events: none.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng pointer-events: none; l\u00e0 m\u1ed9t c\u00e1ch hay \u0111\u1ec3 l\u00e0m checkbox ch\u1ec9 \u0111\u1ecdc m\u00e0 v\u1eabn g\u1eedi d\u1eef li\u1ec7u. Nh\u01b0ng n\u1ebfu mu\u1ed1n ch\u1eb7n ho\u00e0n to\u00e0n, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi JavaScript.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_checkbox_HTML\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 checkbox HTML\u00a0\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n khi Checkbox \u0111\u01b0\u1ee3c ch\u1ecdn?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 ki\u1ec3m tra xem checkbox c\u00f3 \u0111\u01b0\u1ee3c ch\u1ecdn hay kh\u00f4ng. N\u1ebfu checkbox \u0111\u01b0\u1ee3c ch\u1ecdn, m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n s\u1ebd hi\u1ec3n th\u1ecb; n\u1ebfu b\u1ecf ch\u1ecdn, v\u0103n b\u1ea3n s\u1ebd \u1ea9n \u0111i.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ea7u ti\u00ean, ki\u1ec3m tra xem h\u1ed9p ki\u1ec3m c\u00f3 \u0111\u01b0\u1ee3c ch\u1ecdn kh\u00f4ng:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Checkbox:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;input type=\"checkbox\" id=\"myCheck\" onclick=\"myFunction()\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"text\" style=\"display:none\"&gt;Checkbox is CHECKED!&lt;\/p&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3, th\u00eam \u0111o\u1ea1n m\u00e3 JavaScript:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Display some text when the checkbox is checked:&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;label for=\"myCheck\"&gt;Checkbox:&lt;\/label&gt; <\/span>\n<span style=\"font-weight: 400;\">&lt;input type=\"checkbox\" id=\"myCheck\" onclick=\"myFunction()\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p id=\"text\" style=\"display:none\"&gt;Checkbox is CHECKED!&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\n<span style=\"font-weight: 400;\">function myFunction() {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0var checkBox = document.getElementById(\"myCheck\");<\/span>\n<span style=\"font-weight: 400;\"> \u00a0var text = document.getElementById(\"text\");<\/span>\n<span style=\"font-weight: 400;\"> \u00a0if (checkBox.checked == true){<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0text.style.display = \"block\";<\/span>\n<span style=\"font-weight: 400;\"> \u00a0} else {<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0text.style.display = \"none\";<\/span>\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\n<span style=\"font-weight: 400;\">}<\/span>\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85636\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-8-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"655\" height=\"183\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n code tr\u00ean t\u1ea1o ra m\u1ed9t checkbox v\u00e0 khi ng\u01b0\u1eddi d\u00f9ng t\u00edch v\u00e0o checkbox, m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n s\u1ebd hi\u1ec3n th\u1ecb. N\u1ebfu b\u1ecf t\u00edch, \u0111o\u1ea1n v\u0103n b\u1ea3n s\u1ebd \u1ea9n \u0111i.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;label for=&#8221;myCheck&#8221;&gt;Checkbox:&lt;\/label&gt;:<\/b><span style=\"font-weight: 400;\"> G\u00e1n nh\u00e3n &#8220;Checkbox:&#8221; cho checkbox. Khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o nh\u00e3n, checkbox s\u1ebd \u0111\u01b0\u1ee3c ch\u1ecdn ho\u1eb7c b\u1ecf ch\u1ecdn (nh\u1edd thu\u1ed9c t\u00ednh for=&#8221;myCheck&#8221;).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>type=&#8221;checkbox&#8221;: <\/b><span style=\"font-weight: 400;\">T\u1ea1o m\u1ed9t \u00f4 checkbox.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>id=&#8221;myCheck&#8221;: <\/b><span style=\"font-weight: 400;\">\u0110\u1ecbnh danh checkbox \u0111\u1ec3 c\u00f3 th\u1ec3 thao t\u00e1c b\u1eb1ng JavaScript.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>onclick=&#8221;myFunction()&#8221;:<\/b><span style=\"font-weight: 400;\"> Khi checkbox \u0111\u01b0\u1ee3c nh\u1ea5p, h\u00e0m myFunction() s\u1ebd ch\u1ea1y \u0111\u1ec3 ki\u1ec3m tra tr\u1ea1ng th\u00e1i c\u1ee7a checkbox v\u00e0 thay \u0111\u1ed5i hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n v\u0103n b\u1ea3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>function myFunction(): <\/b><span style=\"font-weight: 400;\">Ki\u1ec3m tra tr\u1ea1ng th\u00e1i checked c\u1ee7a checkbox v\u00e0 thay \u0111\u1ed5i display c\u1ee7a &lt;p id=&#8221;text&#8221;&gt; t\u1eeb none sang block ho\u1eb7c ng\u01b0\u1ee3c l\u1ea1i.<\/span><\/li>\n<\/ul>\n<h3><b>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa Checkbox v\u00e0 Radio Button l\u00e0 g\u00ec?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Radio button cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 ch\u1ecdn m\u1ed9t t\u00f9y ch\u1ecdn t\u1eeb m\u1ed9t nh\u00f3m, trong khi c\u00e1c checkbox cho ph\u00e9p nhi\u1ec1u l\u1ef1a ch\u1ecdn. Nh\u00ecn chung, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng radio button khi c\u1ea7n l\u1ef1a ch\u1ecdn m\u1ed9t t\u00f9y ch\u1ecdn v\u00e0 checkbox cho nhi\u1ec1u l\u1ef1a ch\u1ecdn \u0111\u1ed9c l\u1eadp h\u01a1n.\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Radio button<\/b><\/td>\n<td><b>Checkbox<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng khi ch\u1ec9 c\u00f3 m\u1ed9t t\u00f9y ch\u1ecdn \u0111\u01b0\u1ee3c ch\u1ecdn trong s\u1ed1 nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f3 s\u1eb5n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Cho ph\u00e9p ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c t\u1ea1o b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb HTML &lt;input&gt; nh\u01b0ng thu\u1ed9c t\u00ednh lo\u1ea1i \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh radio<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c t\u1ea1o b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb HTML &lt;input&gt; nh\u01b0ng thu\u1ed9c t\u00ednh lo\u1ea1i \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh checkbox<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">M\u1ed9t \u0111\u01a1n v\u1ecb \u0111i\u1ec1u khi\u1ec3n duy nh\u1ea5t<\/span><\/td>\n<td><span style=\"font-weight: 400;\">M\u1ed9t \u0111\u01a1n v\u1ecb \u0111i\u1ec1u khi\u1ec3n nhi\u1ec1u t\u00f9y ch\u1ecdn<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c tr\u00ecnh b\u00e0y d\u01b0\u1edbi d\u1ea1ng v\u00f2ng tr\u00f2n nh\u1ecf tr\u00ean m\u00e0n h\u00ecnh<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c tr\u00ecnh b\u00e0y d\u01b0\u1edbi d\u1ea1ng \u00f4 vu\u00f4ng nh\u1ecf<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">2 tr\u1ea1ng th\u00e1i l\u00e0 True\/False<\/span><\/td>\n<td><span style=\"font-weight: 400;\">3 tr\u1ea1ng th\u00e1i l\u00e0 \u0110\u00e3 ch\u1ecdn (checked), ch\u01b0a ch\u1ecdn (unchecked) v\u00e0 kh\u00f4ng x\u00e1c \u0111\u1ecbnh (indeterminate).\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng khi mu\u1ed1n gi\u1edbi h\u1ea1n l\u1ef1a ch\u1ecdn c\u1ee7a ng\u01b0\u1eddi d\u00f9ng ch\u1ec9 m\u1ed9t t\u00f9y ch\u1ecdn trong ph\u1ea1m vi \u0111\u01b0\u1ee3c cung c\u1ea5p<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng khi b\u1ea1n mu\u1ed1n cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn nhi\u1ec1u l\u1ef1a ch\u1ecdn<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><b>Radio Button<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Radio Button th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c bi\u1ec3u m\u1eabu HTML. Bi\u1ec3u m\u1eabu HTML \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u khi b\u1ea1n c\u1ea7n thu th\u1eadp m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u t\u1eeb kh\u00e1ch truy c\u1eadp trang web. N\u00fat radio \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi b\u1ea1n ch\u1ec9 mu\u1ed1n ch\u1ecdn m\u1ed9t t\u00f9y ch\u1ecdn trong s\u1ed1 nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f3 s\u1eb5n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;ITviec&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;form&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Do you agree with this statement?<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"radio\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"agree\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"yes\"&gt;Yes<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"radio\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"agree\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"no\"&gt;No<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"Submit\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/form&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85637\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-9-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"589\" height=\"151\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-9-vippro.jpg 589w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-9-vippro-300x77.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-9-vippro-200x51.jpg 200w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u1ede v\u00ed d\u1ee5 tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 m\u1ed9t trang HTML \u0111\u01a1n gi\u1ea3n v\u1edbi m\u1ed9t bi\u1ec3u m\u1eabu (form) ch\u1ee9a hai n\u00fat radio (Yes\/No) v\u00e0 m\u1ed9t n\u00fat g\u1eedi (Submit).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;input type=&#8221;radio&#8221;&gt;:<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 c\u00e1c n\u00fat radio, cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ed9t trong hai t\u00f9y ch\u1ecdn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>name=&#8221;agree&#8221;: <\/b><span style=\"font-weight: 400;\">C\u1ea3 hai radio button \u0111\u1ec1u c\u00f3 c\u00f9ng t\u00ean (agree), \u0111i\u1ec1u n\u00e0y \u0111\u1ea3m b\u1ea3o r\u1eb1ng ch\u1ec9 c\u00f3 th\u1ec3 ch\u1ecdn m\u1ed9t trong hai l\u1ef1a ch\u1ecdn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>value=&#8221;yes&#8221; v\u00e0 value=&#8221;no&#8221;:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb g\u1eedi khi bi\u1ec3u m\u1eabu \u0111\u01b0\u1ee3c submit.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ecdn m\u1ed9t t\u00f9y ch\u1ecdn, t\u00f9y ch\u1ecdn kia t\u1ef1 \u0111\u1ed9ng b\u1ecb b\u1ecf ch\u1ecdn. N\u1ebfu kh\u00f4ng ch\u1ecdn g\u00ec, kh\u00f4ng c\u00f3 gi\u00e1 tr\u1ecb n\u00e0o \u0111\u01b0\u1ee3c g\u1eedi.<\/span><\/p>\n<h4><b>Checkbox<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Checkbox c\u0169ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u nh\u1ea5t trong c\u00e1c bi\u1ec3u m\u1eabu HTML. Checkbox cho ph\u00e9p b\u1ea1n ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn t\u1eeb danh s\u00e1ch c\u00e1c t\u00f9y ch\u1ecdn.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;HTML Checkboxes&lt;\/title&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;form&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Choose languages you know:<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"C\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"yes\"&gt;C<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"C++\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"yes\"&gt;C++<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"Java\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"yes\"&gt;Java<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"Python\"\u00a0<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=\"yes\"&gt;Python<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;br&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"Submit\"&gt;<\/span>\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/form&gt;<\/span>\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-85638\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-10-vippro.jpg\" alt=\"checkbox html - itviec blog\" width=\"649\" height=\"196\" \/><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 tr\u00ean l\u00e0 m\u1ed9t trang HTML \u0111\u01a1n gi\u1ea3n v\u1edbi m\u1ed9t bi\u1ec3u m\u1eabu (form) ch\u1ee9a nhi\u1ec1u \u00f4 checkbox cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn nhi\u1ec1u ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u00e0 h\u1ecd bi\u1ebft, c\u00f9ng v\u1edbi m\u1ed9t n\u00fat g\u1eedi (Submit).<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;input type=&#8221;checkbox&#8221;&gt;: <\/b><span style=\"font-weight: 400;\">C\u00e1c checkbox cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f9ng l\u00fac.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>name=&#8221;C&#8221;, name=&#8221;C++&#8221;, name=&#8221;Java&#8221;, name=&#8221;Python&#8221;:<\/b><span style=\"font-weight: 400;\"> X\u00e1c \u0111\u1ecbnh t\u00ean c\u1ee7a t\u1eebng checkbox \u0111\u1ec3 khi d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c g\u1eedi \u0111i, m\u1ed7i checkbox c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c nh\u1eadn di\u1ec7n ri\u00eang bi\u1ec7t.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>value=&#8221;yes&#8221;:<\/b><span style=\"font-weight: 400;\"> Gi\u00e1 tr\u1ecb g\u1eedi n\u1ebfu checkbox \u0111\u01b0\u1ee3c ch\u1ecdn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 ch\u1ecdn nhi\u1ec1u checkbox c\u00f9ng l\u00fac v\u00e0 d\u1eef li\u1ec7u t\u1eeb c\u00e1c checkbox \u0111\u01b0\u1ee3c ch\u1ecdn s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi khi submit.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Khi hi\u1ec3n th\u1ecb tr\u00ean trang web, b\u1ea1n s\u1ebd th\u1ea5y c\u00e2u h\u1ecfi &#8220;Choose languages you know:&#8221; v\u00e0 c\u00f3 th\u1ec3 ch\u1ecdn nhi\u1ec1u checkbox \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u nh\u1eefng ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh m\u00e0 b\u1ea1n bi\u1ebft. Nh\u1ea5n v\u00e0o n\u00fat Submit, d\u1eef li\u1ec7u t\u1eeb checkbox \u0111\u01b0\u1ee3c ch\u1ecdn s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111i.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_checkbox_HTML\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 checkbox HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Checkbox HTML<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 ph\u1ed5 bi\u1ebfn trong thi\u1ebft k\u1ebf bi\u1ec3u m\u1eabu (form), gi\u00fap thu th\u1eadp th\u00f4ng tin t\u1eeb ng\u01b0\u1eddi d\u00f9ng m\u1ed9t c\u00e1ch tr\u1ef1c quan v\u00e0 hi\u1ec7u qu\u1ea3. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng ch\u00e8n checkbox b\u1eb1ng th\u1ebb <\/span><span style=\"font-weight: 400;\">&lt;input type=&#8221;checkbox&#8221;&gt;<\/span><span style=\"font-weight: 400;\"> v\u00e0 t\u00f9y ch\u1ec9nh b\u1eb1ng CSS \u0111\u1ec3 t\u1ea1o giao di\u1ec7n chuy\u00ean nghi\u1ec7p h\u01a1n. Hy v\u1ecdng b\u00e0i vi\u1ebft n\u00e0y \u0111\u00e3 gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 c\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML \u0111\u1ec3 \u1ee9ng d\u1ee5ng v\u00e0o d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh nh\u00e9!<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><strong><a href=\"\/blog\/html-la-gi\/\" target=\"_blank\" rel=\"noopener\"><i>Gi\u1ea3i \u0111\u00e1p \u201ct\u1ea5t t\u1ea7n t\u1eadt\u201d nh\u1eefng \u0111i\u1ec1u c\u1ea7n bi\u1ebft v\u1ec1 HTML<\/i><\/a><\/strong><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Checkbox HTML gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f9ng l\u00fac, th\u01b0\u1eddng g\u1eb7p nhi\u1ec1u trong c\u00e1c bi\u1ec3u m\u1eabu (form). C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 ch\u00e8n checkbox v\u00e0o HTML, t\u1eeb c\u00e1ch c\u01a1 b\u1ea3n v\u1edbi th\u1ebb &lt;input&gt; \u0111\u1ebfn c\u00e1c ph\u01b0\u01a1ng ph\u00e1p n\u00e2ng cao nh\u01b0 s\u1eed d\u1ee5ng CSS v\u00e0 JavaScript \u0111\u1ec3 t\u00f9y ch\u1ec9nh giao di\u1ec7n v\u00e0 [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":85639,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-85625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Checkbox HTML quan tr\u1ecdng trong thi\u1ebft k\u1ebf form, gi\u00fap thu th\u1eadp th\u00f4ng tin ng\u01b0\u1eddi d\u00f9ng. T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Checkbox HTML v\u1edbi v\u00ed d\u1ee5 chi ti\u1ebft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/checkbox-html\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML\" \/>\n<meta property=\"og:description\" content=\"Checkbox HTML gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f9ng l\u00fac, th\u01b0\u1eddng g\u1eb7p nhi\u1ec1u trong c\u00e1c bi\u1ec3u m\u1eabu (form). C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 ch\u00e8n checkbox v\u00e0o\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/checkbox-html\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-03T09:04:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-17T02:25:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML - ITviec Blog","description":"Checkbox HTML quan tr\u1ecdng trong thi\u1ebft k\u1ebf form, gi\u00fap thu th\u1eadp th\u00f4ng tin ng\u01b0\u1eddi d\u00f9ng. T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Checkbox HTML v\u1edbi v\u00ed d\u1ee5 chi ti\u1ebft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/checkbox-html\/","og_locale":"vi_VN","og_type":"article","og_title":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML","og_description":"Checkbox HTML gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00f9y ch\u1ecdn c\u00f9ng l\u00fac, th\u01b0\u1eddng g\u1eb7p nhi\u1ec1u trong c\u00e1c bi\u1ec3u m\u1eabu (form). C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 ch\u00e8n checkbox v\u00e0o","og_url":"https:\/\/itviec.com\/blog\/checkbox-html\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-04-03T09:04:57+00:00","article_modified_time":"2025-06-17T02:25:57+00:00","og_image":[{"width":640,"height":337,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png","type":"image\/png"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"17 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML","datePublished":"2025-04-03T09:04:57+00:00","dateModified":"2025-06-17T02:25:57+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/"},"wordCount":3978,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/checkbox-html\/","url":"https:\/\/itviec.com\/blog\/checkbox-html\/","name":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png","datePublished":"2025-04-03T09:04:57+00:00","dateModified":"2025-06-17T02:25:57+00:00","description":"Checkbox HTML quan tr\u1ecdng trong thi\u1ebft k\u1ebf form, gi\u00fap thu th\u1eadp th\u00f4ng tin ng\u01b0\u1eddi d\u00f9ng. T\u00ecm hi\u1ec3u c\u00e1ch s\u1eed d\u1ee5ng Checkbox HTML v\u1edbi v\u00ed d\u1ee5 chi ti\u1ebft.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/checkbox-html\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/04\/checkbox-html-vippro-scaled.png","width":640,"height":337,"caption":"checkbox html - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/checkbox-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Checkbox HTML: C\u00e1ch ch\u00e8n v\u00e0 t\u00f9y ch\u1ec9nh checkbox trong HTML"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=85625"}],"version-history":[{"count":1,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85625\/revisions"}],"predecessor-version":[{"id":88172,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/85625\/revisions\/88172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/85639"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=85625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=85625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=85625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}