{"id":7207,"date":"2023-12-07T04:41:24","date_gmt":"2023-12-07T04:41:24","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=7207"},"modified":"2023-12-13T07:24:42","modified_gmt":"2023-12-13T07:24:42","slug":"jquerytrigger-change-does-not-work-for-radio-buttons","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/","title":{"rendered":"jQuery trigger(‘change’) does not work for radio buttons"},"content":{"rendered":"

We programmers mostly use
\n$(selector).on('change', child-selector, function() {});<\/code><\/p>\n

in our Jquery scripts.
\nThe onchange <\/em><\/strong>event works well for all inputs.<\/p>\n

In one of my projects, I have a requirement that shows the next form fields based on the current input selected value. For this, I have passed data-attr-parent to all the next fields and they are hidden initially. I need to display\/hide the next fields according to the value selected.
\nTo handle this, whenever any change event happens, then initially I made all fields hidden, then display form fields based on the selected value of the current field. Parent field can be of select or radio type inputs.
\n$(selector).on('change', 'select, input[type=\"radio\"]', function() {
\nvalueSelected = $(this).val();
\nabc(valueSelected);
\n});
\nfunction abc(valueSelected) {
\nresetDependentFields(valueSelected);
\n$('[data-attr-parent=\"'+valueSelected+'\"]').trigger('change');
\n\/\/ script to Show\/Hide next fields based on currently selected parent fields value with Ajax call
\n}<\/code><\/p>\n

The above example shows that if I made any change on the select or radio button, then initially all child\/dependent inputs will be hidden and their value will be reset, which means made 0, blank, and unchecked for radio and checkboxes.
\nA child input can be any type of textbox, number, date, select, radio button, checkbox, etc. If a child selects or radio button has its further children, and they have values, then they are not getting hidden when I fired a change event on the grand-parent field or grand-grand-parent field. Whenever I change a parent field, then all children and their grand-child should be hidden and their values should be reset. If a parent field has select or radio buttons as child fields, the child fields of these should also execute the Ajax code and reset functions. To handle this:<\/p>\n

For this, I have added a line:<\/em>
\n$('[data-attr-parent=\"'+valueSelected+'\"]').trigger('change');<\/code><\/p>\n

so that correct implementation should be done for grand-child fields also. Trigger(\u2018change\u2019)<\/em><\/strong> worked well for select inputs, but not for radio buttons. So, I have added a few lines after the above line to handle the radio button issue:<\/p>\n

newRadioStatus = {};
\nparentId = valueSelected;
\n$('[data-attr-parent=\"'+parentId+'\"]').each(function() {
\nif($(this).attr('type') == 'radio') {
\nif($(this).attr('name') in newRadioStatus == false) {
\nnewRadioStatus[$(this).attr('name')] = {};
\n}
\nnewRadioStatus[$(this).attr('name')][$(this).attr('value')] = ($(this).is(':checked') ? 1:0);
\nradioParentId = $(this).attr('name');
\nradioParentVal = $(this).attr('value');
\nresetDependentFields(radioParentId);
\n}
\n});<\/code><\/p>\n

That\u2019s the way I handled the radio button on the change trigger.<\/p>\n

If you have skills in PHP programming and you want to enhance your career in this field, a PHP Certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams<\/a> are offered by StudySection along with other programming certification exams.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

We programmers mostly use $(selector).on(‘change’, child-selector, function() {}); in our Jquery scripts. The onchange event works well for all inputs.<\/p>\n","protected":false},"author":1,"featured_media":7208,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[170,363],"acf":[],"yoast_head":"\njQuery trigger('change') does not work for radio buttons - SS Blog<\/title>\n<meta name=\"description\" content=\"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery trigger('change') does not work for radio buttons - SS Blog\" \/>\n<meta property=\"og:description\" content=\"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-07T04:41:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-13T07:24:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/12\/jQuery-trigger1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"jQuery trigger(‘change’) does not work for radio buttons\",\"datePublished\":\"2023-12-07T04:41:24+00:00\",\"dateModified\":\"2023-12-13T07:24:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\"},\"wordCount\":363,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Jquery\",\"Trigger\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\",\"url\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\",\"name\":\"jQuery trigger('change') does not work for radio buttons - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2023-12-07T04:41:24+00:00\",\"dateModified\":\"2023-12-13T07:24:42+00:00\",\"description\":\"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery trigger(‘change’) does not work for radio buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery trigger('change') does not work for radio buttons - SS Blog","description":"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.","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:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/","og_locale":"en_US","og_type":"article","og_title":"jQuery trigger('change') does not work for radio buttons - SS Blog","og_description":"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.","og_url":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2023-12-07T04:41:24+00:00","article_modified_time":"2023-12-13T07:24:42+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/12\/jQuery-trigger1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"jQuery trigger(‘change’) does not work for radio buttons","datePublished":"2023-12-07T04:41:24+00:00","dateModified":"2023-12-13T07:24:42+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/"},"wordCount":363,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Jquery","Trigger"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/","url":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/","name":"jQuery trigger('change') does not work for radio buttons - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2023-12-07T04:41:24+00:00","dateModified":"2023-12-13T07:24:42+00:00","description":"JQuery Trigger(\u2018change\u2019) worked well for select inputs, but not for radio buttons. So, I have added a few lines to handle the button issue.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/jquerytrigger-change-does-not-work-for-radio-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery trigger(‘change’) does not work for radio buttons"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":769,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7207"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=7207"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7207\/revisions"}],"predecessor-version":[{"id":7232,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/7207\/revisions\/7232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/7208"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=7207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=7207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=7207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}