{"id":154,"date":"2025-08-17T08:06:15","date_gmt":"2025-08-17T08:06:15","guid":{"rendered":"https:\/\/iotnoob.com\/wordpress\/?p=154"},"modified":"2025-08-17T08:17:25","modified_gmt":"2025-08-17T08:17:25","slug":"get-user-defined-data-attribute-%e0%b8%88%e0%b8%b2%e0%b8%81-html-tag","status":"publish","type":"post","link":"https:\/\/iotnoob.com\/wordpress\/2025\/08\/17\/get-user-defined-data-attribute-%e0%b8%88%e0%b8%b2%e0%b8%81-html-tag\/","title":{"rendered":"Get user defined data attribute \u0e08\u0e32\u0e01 HTML tag"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"form-check fs-5 ms-0 me-2\">\n\t&lt;input class=\"form-check-input form-check-input-green\" type=\"checkbox\" value=\"\" id=\"greenCheckbox_1\" data-group=\"x\" data-index=\"1\">\n\t&lt;label class=\"form-check-label\" for=\"greenCheckbox_1\">1&lt;\/label>\n&lt;\/div><\/pre>\n\n\n\n<p>\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e04\u0e48\u0e32\u0e43\u0e19 <code>data-index<\/code> \u0e02\u0e2d\u0e07 checkbox \u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e46 \u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 property <strong><code>dataset<\/code><\/strong> \u0e02\u0e2d\u0e07 element \u0e04\u0e23\u0e31\u0e1a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">## \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e04\u0e48\u0e32 data-index<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. \u0e04\u0e49\u0e19\u0e2b\u0e32 Element \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/strong><\/h4>\n\n\n\n<p>\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19 \u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e49\u0e19\u0e2b\u0e32 element \u0e02\u0e2d\u0e07 checkbox \u0e19\u0e31\u0e49\u0e19\u0e46 \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e2a\u0e35\u0e22\u0e01\u0e48\u0e2d\u0e19 \u0e42\u0e14\u0e22\u0e2d\u0e32\u0e08\u0e08\u0e30\u0e43\u0e0a\u0e49 <code>id<\/code>, <code>class<\/code>, \u0e2b\u0e23\u0e37\u0e2d selector \u0e2d\u0e37\u0e48\u0e19\u0e46<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07: \u0e04\u0e49\u0e19\u0e2b\u0e32 checkbox \u0e15\u0e31\u0e27\u0e41\u0e23\u0e01\u0e17\u0e35\u0e48\u0e21\u0e35 class \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\nconst myCheckbox = document.querySelector('.form-check-input-green');<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e04\u0e48\u0e32\u0e1c\u0e48\u0e32\u0e19 <code>.dataset<\/code> (\u0e27\u0e34\u0e18\u0e35\u0e17\u0e35\u0e48\u0e41\u0e19\u0e30\u0e19\u0e33)<\/strong><\/h4>\n\n\n\n<p>\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a <code>data-*<\/code> attribute \u0e17\u0e38\u0e01\u0e15\u0e31\u0e27 \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e44\u0e14\u0e49\u0e1c\u0e48\u0e32\u0e19 <code>element.dataset<\/code> \u0e15\u0e32\u0e21\u0e14\u0e49\u0e27\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e02\u0e2d\u0e07 attribute \u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a camelCase (\u0e16\u0e49\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e35\u0e02\u0e35\u0e14 <code>-<\/code> \u0e08\u0e30\u0e16\u0e39\u0e01\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e43\u0e2b\u0e0d\u0e48\u0e41\u0e17\u0e19)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>data-index<\/code> \u0e08\u0e30\u0e01\u0e25\u0e32\u0e22\u0e40\u0e1b\u0e47\u0e19 <code>element.dataset.index<\/code><\/li>\n\n\n\n<li><code>data-group<\/code> \u0e08\u0e30\u0e01\u0e25\u0e32\u0e22\u0e40\u0e1b\u0e47\u0e19 <code>element.dataset.group<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e44\u0e14\u0e49 element \u0e21\u0e32\u0e41\u0e25\u0e49\u0e27\nconst indexValue = myCheckbox.dataset.index;\nconst groupValue = myCheckbox.dataset.group;\n\nconsole.log(\"Data Index:\", indexValue); \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e48\u0e32\u0e02\u0e2d\u0e07 data-index\nconsole.log(\"Data Group:\", groupValue); \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e48\u0e32\u0e02\u0e2d\u0e07 data-group<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">## \u0e2d\u0e35\u0e01\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e27\u0e34\u0e18\u0e35: \u0e43\u0e0a\u0e49 <code>getAttribute()<\/code><\/h3>\n\n\n\n<p>\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e34\u0e18\u0e35\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01 attribute \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48 <code>data-*<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const indexValue = myCheckbox.getAttribute('data-index');\nconst groupValue = myCheckbox.getAttribute('data-group');\n\nconsole.log(\"Data Index:\", indexValue);\nconsole.log(\"Data Group:\", groupValue);<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e04\u0e48\u0e32\u0e43\u0e19 data-index \u0e02\u0e2d\u0e07 checkbox \u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e46 \u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 property dataset \u0e02\u0e2d\u0e07 element \u0e04\u0e23\u0e31\u0e1a ## \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e04\u0e48\u0e32 data-index 1.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":1,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/posts\/154\/revisions\/155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/media\/158"}],"wp:attachment":[{"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iotnoob.com\/wordpress\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}