{"id":2646,"date":"2017-07-05T12:26:11","date_gmt":"2017-07-05T10:26:11","guid":{"rendered":"http:\/\/www.itersdesktop.com\/?p=2646"},"modified":"2017-07-19T12:03:00","modified_gmt":"2017-07-19T10:03:00","slug":"how-to-check-and-uncheck-a-checkbox-in-jquery","status":"publish","type":"post","link":"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/","title":{"rendered":"Comment cocher et  d\u00e9cocher une checkbox avec jQuery"},"content":{"rendered":"<p>L\u00e0m v\u1edbi jQuery, nhi\u1ec1u b\u1ea1n l\u1eadp tr\u00ecnh Front End ch\u1eafc s\u1ebd n\u1eafm r\u00f5 c\u00e1ch th\u1ee9c \u0111\u1ec3 vi\u1ebft h\u00e0m \u0111\u1ec3 b\u1eaft s\u1ef1 ki\u1ec7n check v\u00e0 uncheck m\u1ed9t \u00f4 checkbox nh\u01b0 th\u1ebf n\u00e0o. T\u00f4i c\u01b0\u1ee3c l\u00e0 c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft code trong v\u00f2ng m\u1ed9t n\u1ed1t nh\u1ea1c \u0111\u1ec3 x\u1eed l\u00fd nh\u1eefng s\u1ef1 ki\u1ec7n n\u00e0y m\u00e0 kh\u00f4ng g\u1eb7p qu\u00e1 nhi\u1ec1u kh\u00f3 kh\u0103n. V\u00ec th\u1ebf, b\u00e0i n\u00e0y ch\u1ec9 l\u00e0m m\u1ed9t m\u1ee5c \u0111\u00edch gom l\u1ea1i m\u1ed9t s\u1ed1 \u0111i\u1ec3m c\u1ea7n l\u01b0u \u00fd d\u00e0nh cho ai \u0111\u00f3 mu\u1ed1n tham kh\u1ea3o c\u00e1ch th\u1ee9c t\u01b0\u01a1ng t\u00e1c v\u1edbi \u00f4 checkbox qua vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c <strong>selector<\/strong> \u0111\u1ec3 c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng.<\/p>\n<p>\u0110\u1ec3 d\u1ec5 theo d\u00f5i, t\u00f4i \u0111\u01b0a ra m\u1ed9t v\u00ed d\u1ee5 \u0111\u01a1n gi\u1ea3n nh\u01b0 sau:<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<pre class=\"lang:xhtml decode:true \" title=\"A toy example\">&lt;div id=\"allFruits\" class=\"checkbox\"&gt;\r\n  &lt;label&gt;&lt;input type=\"checkbox\" value=\"apricot\" name=\"fruit\"&gt;Apricot&lt;\/label&gt;&lt;br\/&gt;\r\n  &lt;label&gt;&lt;input type=\"checkbox\" value=\"banana\" name=\"fruit\"&gt;Banana&lt;\/label&gt;&lt;br\/&gt;\r\n  &lt;label&gt;&lt;input type=\"checkbox\" value=\"grapes\" name=\"fruit\"&gt;Grapes&lt;\/label&gt;&lt;br\/&gt;\r\n  &lt;label&gt;&lt;input type=\"checkbox\" value=\"orange\" name=\"fruit\"&gt;Orange&lt;\/label&gt;&lt;br\/&gt;\r\n  &lt;label&gt;&lt;input type=\"checkbox\" value=\"plum\" name=\"fruit\"&gt;Plum&lt;\/label&gt;&lt;br\/&gt;\r\n  &lt;input type=\"button\" value=\"Select All\" name=\"selection\"&gt;\r\n&lt;\/div&gt;<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td>[box type=\u00a0\u00bbshadow\u00a0\u00bb ]<\/p>\n<div id=\"allFruits\" class=\"checkbox\"><label><input name=\"fruit\" type=\"checkbox\" value=\"apricot\" \/>Apricot<\/label><br \/>\n<label><input name=\"fruit\" type=\"checkbox\" value=\"banana\" \/>Banana<\/label><br \/>\n<label><input name=\"fruit\" type=\"checkbox\" value=\"grapes\" \/>Grapes<\/label><br \/>\n<label><input name=\"fruit\" type=\"checkbox\" value=\"organe\" \/>Orange<\/label><br \/>\n<label><input name=\"fruit\" type=\"checkbox\" value=\"plum\" \/>Plum<\/label><br \/>\n<input name=\"selection\" type=\"button\" value=\"Select All\" \/><\/div>\n<p>[\/box]<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a0148ee084ad\" class=\"ez-toc-cssicon-toggle-label\"><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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a0148ee084ad\"  aria-label=\"Toggle\" \/><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:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#chon-checkbox-de-lam-viec\" >Ch\u1ecdn checkbox \u0111\u1ec3 l\u00e0m vi\u1ec7c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#cap-nhat-gia-tri\" >C\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#source-code-cua-vi-du\" >Source code\u00a0c\u1ee7a v\u00ed d\u1ee5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#chon-checkbox-de-lam-viec-2\" >Ch\u1ecdn checkbox \u0111\u1ec3 l\u00e0m vi\u1ec7c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#cap-nhat-gia-tri-2\" >C\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#source-code-cua-vi-du-2\" >Source code\u00a0c\u1ee7a v\u00ed d\u1ee5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#chon-checkbox-de-lam-viec-3\" >Ch\u1ecdn checkbox \u0111\u1ec3 l\u00e0m vi\u1ec7c<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#cap-nhat-gia-tri-3\" >C\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.itersdesktop.com\/fr\/2017\/07\/05\/how-to-check-and-uncheck-a-checkbox-in-jquery\/#source-code-cua-vi-du-3\" >Source code\u00a0c\u1ee7a v\u00ed d\u1ee5<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"chon-checkbox-de-lam-viec\"><\/span>Ch\u1ecdn checkbox \u0111\u1ec3 l\u00e0m vi\u1ec7c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0110\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c checkbox n\u00e0o \u0111ang \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u00e1c, b\u1ea1n c\u1ea7n bi\u1ebft c\u00e1ch ch\u1ec9 ra n\u00f3. C\u00f3 h\u00e0ng t\u00e1 c\u00e1ch th\u1ee9c ch\u1ecdn m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng (element) tr\u00ean trang m\u1ed9t trang web. Mu\u1ed1n bi\u1ebft th\u00eam v\u1ec1 c\u00e1ch ch\u1ecdn \u0111\u1ed1i t\u01b0\u1ee3ng (selectors), b\u1ea1n c\u00f3 th\u1ec3 gh\u00e9 th\u0103m trang ch\u00ednh th\u1ee9c c\u1ee7a jQuery: https:\/\/api.jquery.com\/category\/selectors\/ ho\u1eb7c https:\/\/www.w3schools.com\/jquery\/jquery_ref_selectors.asp<\/p>\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch m\u00e0 t\u00f4i ch\u1ecdn c\u00e1c checkbox trong v\u00ed d\u1ee5 n\u00eau tr\u00ean<\/p>\n<pre class=\"lang:js decode:true\">var status = $('input:checkbox[name=fruit]').is(':checked');\r\nconsole.log(status);<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"cap-nhat-gia-tri\"><\/span>C\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nh\u01b0 ch\u00fang ta bi\u1ebft, checkbox l\u00e0 m\u1ed9t trong nh\u1eefng \u0111\u1ed1i t\u01b0\u1ee3ng HTML ph\u1ed5 bi\u1ebfn d\u00f9ng \u0111\u1ec3 bi\u1ec3u di\u1ec5n nh\u1eefng kh\u00e1i ni\u1ec7m c\u00f3 hai tr\u1ea1ng th\u00e1i. \u0110\u00f3 l\u00e0 ch\u1ecdn\/kh\u00f4ng ch\u1ecdn hay c\u1ee5 th\u1ec3 h\u01a1n true\/false. Ng\u1ea7m \u0111\u1ecb, khi tick\/check v\u00e0o \u00f4 checkbox, gi\u00e1 tr\u1ecb c\u1ee7a n\u00f3 s\u1ebd true v\u00e0 ng\u01b0\u1ee3c l\u1ea1i. V\u00ec th\u1ebf \u0111\u1ec3 c\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb c\u1ee7a n\u00f3 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh prop hay attr \u0111\u1ec3 thay \u0111\u1ed5i gi\u00e1 tr\u1ecb c\u1ee7a \u00f4.<\/p>\n<pre class=\"lang:js decode:true \">$('input:checkbox[name=fruit]').prop('checked', true);<\/pre>\n<p>Quay l\u1ea1i v\u00ed d\u1ee5 tr\u00ean, t\u00f4i d\u00f9ng prop \u0111\u1ec3 c\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb cho thu\u1ed9c t\u00ednh checked th\u00e0nh true.<\/p>\n<p>Tr\u00ean th\u1ef1c t\u1ebf, ch\u00fang ta mu\u1ed1n r\u1eb1ng: khi tick v\u00e0o checkbox, n\u00f3 s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u1ea3o ng\u01b0\u1ee3c tr\u1ea1ng th\u00e1i. T\u1ee9c l\u00e0: n\u1ebfu \u00f4 \u0111\u00e3 checked th\u00ec chuy\u1ec3n th\u00e0nh unchecked v\u00e0 ng\u01b0\u1ee3c l\u1ea1i. \u0110\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c nh\u01b0 th\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o \u0111o\u1ea1n code sau:<\/p>\n<pre class=\"lang:js decode:true \">var status = $('input:checkbox[name=fruit]').is(':checked');\r\n$('input:checkbox[name=fruit]').prop('checked', !status);<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"source-code-cua-vi-du\"><\/span>Source code\u00a0c\u1ee7a v\u00ed d\u1ee5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Xem source code c\u1ee7a v\u00ed d\u1ee5 minh h\u1ecda t\u1ea1i https:\/\/jsfiddle.net\/nvntung\/htzojcgs\/44\/<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2659\" src=\"http:\/\/www.itersdesktop.com\/wp-content\/uploads\/2017\/07\/checkedandunchecked-1024x502.png\" alt=\"checkedandunchecked\" width=\"620\" height=\"304\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2017\/07\/checkedandunchecked-1024x502.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2017\/07\/checkedandunchecked-300x147.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2017\/07\/checkedandunchecked-768x376.png 768w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2017\/07\/checkedandunchecked.png 1075w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>L\u00e0m v\u1edbi jQuery, nhi\u1ec1u b\u1ea1n l\u1eadp tr\u00ecnh Front End ch\u1eafc s\u1ebd n\u1eafm r\u00f5 c\u00e1ch th\u1ee9c \u0111\u1ec3 vi\u1ebft h\u00e0m \u0111\u1ec3 b\u1eaft s\u1ef1 ki\u1ec7n check v\u00e0 uncheck m\u1ed9t \u00f4 checkbox nh\u01b0 th\u1ebf&hellip; <\/p>\n","protected":false},"author":2,"featured_media":2659,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[133,4],"tags":[622,568,623],"class_list":["post-2646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-web-engineering","tag-checkbox","tag-jquery","tag-jquery-selector"],"_links":{"self":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/2646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/comments?post=2646"}],"version-history":[{"count":14,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/2646\/revisions"}],"predecessor-version":[{"id":2727,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/2646\/revisions\/2727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media\/2659"}],"wp:attachment":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media?parent=2646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/categories?post=2646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/tags?post=2646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}