$("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
- February 9, 2022 @ 18:54:33 [Current Revision] by Sharing Solution
- February 9, 2022 @ 18:54:36 [Autosave] by Sharing Solution
- February 9, 2022 @ 18:54:33 by Sharing Solution
- November 8, 2021 @ 21:17:56 by Sharing Solution
Revision Differences
November 8, 2021 @ 21:17:56 | Current 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: | |||
Added: });</blockquote> |
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.