You are viewing an old revision of this post, from November 8, 2021 @ 21:17:56. See below for differences between this version and the current revision.

Javascript – How to check and uncheck radio button on click

I was working with a client who was required to be able to uncheck the checked radio. I was struggling for many hours with that request. Finally, I find out a solution to solve that issue with Javascript. The solution is to track the selected state manually using the "click" event handler and a custom class state. Handle the click events on the radio input elements and check if the "selected" class exists on the clicked element. If it does, (meaning it has been clicked before), remove the class and uncheck the element. If it doesn't, remove the class from all elements of the same name and add it to only the clicked element. Here is the code in Jquery:
$("input:radio").on("click",function (e) { var inp=$(this); //cache the selector if (inp.is(".theone")) { //see if it has the selected class inp.prop("checked",false).removeClass("theone"); return; } $("input:radio[name='"+inp.prop("name")+"'].theone").removeClass("theone"); inp.addClass("theone"); });

Revisions

Revision Differences

November 8, 2021 @ 21:17:56Current Revision
Content
Unchanged: I was working with a client who was required to be able to uncheck the checked radio.Unchanged: I was working with a client who was required to be able to uncheck the checked radio.
Unchanged: I was struggling for many hours with that request.Unchanged: I was struggling for many hours with that request.
Unchanged: Finally, I find out a solution to solve that issue with Javascript.Unchanged: Finally, I find out a solution to solve that issue with Javascript.
Unchanged: The solution is to track the selected state manually using the "click" event handler and a custom class state.Unchanged: The solution is to track the selected state manually using the "click" event handler and a custom class state.
Unchanged: Handle the click events on the radio input elements and check if the "selected" class exists on the clicked element.Unchanged: Handle the click events on the radio input elements and check if the "selected" class exists on the clicked element.
Unchanged: If it does, (meaning it has been clicked before), remove the class and uncheck the element.Unchanged: If it does, (meaning it has been clicked before), remove the class and uncheck the element.
Unchanged: If it doesn't, remove the class from all elements of the same name and add it to only the clicked element.Unchanged: If it doesn't, remove the class from all elements of the same name and add it to only the clicked element.
 Added: Here is the code in Jquery:<code class="hljs language-javascript">
 Added: </code>
 Added: <blockquote>$( "input:radio" ).on("click",function (e) {
 Added: var inp=$(this); //cache the selector
 Added: if (inp.is(".theone")) { //see if it has the selected class
 Added: inp.prop("checked" ,false).removeClass("theone");
Deleted: Here is the code in Jquery:Added: return;
Deleted: <code class="hljs language-javascript"> 
Deleted: $(<span class="hljs-string" >"input:radio" </span>).<span class="hljs-title function_">on< /span>(<span class="hljs-string" >"click"</span>,<span class="hljs-keyword" >function</span> (<span class="hljs-params">e</span>) { 
Deleted: <span class="hljs-keyword">var</span> inp=$(<span class="hljs-variable language_">this</span>); <span class="hljs-comment">//cache the selector</span> 
Deleted: <span class="hljs-keyword">if</span> (inp.<span class="hljs-title function_">is< /span>(<span class="hljs-string" >".theone"</span>)) { <span class="hljs-comment">//see if it has the selected class</span> 
Deleted: inp.<span class="hljs-title function_">prop< /span>(<span class="hljs-string" >"checked"</span>,<span class="hljs-literal" >false</span>).<span class="hljs-title function_">removeClass< /span>(<span class="hljs-string" >"theone"</span>); 
 Added: }
 Added: $("input:radio[name= '"+inp.prop(" name")+"'].theone" ).removeClass("theone");
Deleted: <span class="hljs-keyword" >return</span>;Added: inp.addClass("theone");
Deleted: }  
Deleted: $(<span class="hljs-string" >"input:radio[name= '"</span>+inp.<span class="hljs-title function_">prop< /span>(<span class="hljs-string" >"name"</span>)+<span class="hljs-string" >"'].theone"< /span>).<span class="hljs-title function_">removeClass< /span>(<span class="hljs-string" >"theone"</span>); 
Deleted: inp.<span class="hljs-title function_">addClass< /span>(<span class="hljs-string" >"theone"</span>); 
Deleted: });</code>  
 Added: });</blockquote>

Note: Spaces may be added to comparison text to allow better line wrapping.

No comments yet.

Leave a Reply