By only toggling the "checked" state of the radio button that's been selected, we are simultaneously removing the attribute for all other buttons

I'm feeling overwhelmed and struggling to understand the reasoning behind this.

There are 4 radio buttons

(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">

When the user selects the second button, I want the markup to adjust like this: There are 4 Radio buttons

( ) <input type="radio" name="radioGroup">
(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">

I've attempted using different forms of click events to uncheck the previously selected button but it's not working as intended.

Although the attribute is being set to 'checked' for the newly selected button, it's not deselecting the originally checked button. http://jsfiddle.net/Dnd2L/27/

javascriptasp.net

Answer №1

In my opinion, the checked attribute serves as a default value for radio buttons. When it comes to radio button evaluation during form submission, using onclick might yield better results.

For illustration:

<input type="radio" id="rdo1" name="rdoTest" onclick="ChangeStatus();" />

<script>
        function ChangeStatus()
        {
              $('#rdo1').prop('checked', true);
        }
</script>

JQuery handles true/false attributes in a unique manner.

Answer №2

Within a set of radio buttons, only one is allowed to be selected at a time. Therefore, there is no need to manually deselect an option as the browser handles it automatically.

If you make changes to the code found at http://jsfiddle.net/Dnd2L/35/ by removing or commenting out this line: 

$("input:radio").removeAttr('checked');
, the buttons will accurately display which one is currently selected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

Obtain Outcome from a Nested Function in Node.js

I'm grappling with the concept of manipulating the stack in JS and hoping this exercise will provide some clarity. Currently, I'm attempting to create a function that makes a SOAP XML call, parses the data, and returns it when called. While I c ...

javascriptnode.jsxmlasync-awaitrequest

What method can be used to keep Chromium open while using Puppeteer?

I am trying to figure out how to launch only one instance of Chromium from my first script and then connect to it from subsequent scripts. I am aware of the puppeteer.connect() method, but the issue is that when I start the script responsible for launching ...

javascriptnode.jschromiumpuppeteer

Having difficulty triggering a button click event in a child iframe using javascript

Experimenting with the Jquery UI dialog has been an interesting experience. I have a web page featuring a gridview, a button for refreshing the gridview, and a link. Clicking on the link opens a dialog window displaying the record details. After making ch ...

javascriptjqueryasp.netjquery-uiiframe

retrieve the information from a specific field within the store and store it in an array

Perhaps this is a question that pertains to using pure JavaScript, but for some reason I can't seem to figure it out. I am currently working on extjs4.2 using Sencha Architect and have received a JSON response from the server in the following format: ...

javascriptjsonextjsextjs4

ajax eliminating any content that comes after a space

When using ajax to populate options in a select field within my form, I noticed that everything after a space gets removed when submitting to the controller. <div class="col-md-9"> <form class="" action="<?php echo base_url(); ?>Sms/add" me ...

javascriptphpjqueryajaxcodeigniter

The active link for pagination in CodeIgniter is malfunctioning

Even though there might be similar posts on StackOverflow, my situation is unique. Hence, I have decided to ask this question with a specific title. Let me break down my issue into smaller parts: Part - 1: I have a regular view page where I can select a ...

javascriptphpajaxcodeigniter

SQL integrated ASP.Net MVC application

In my MVC application, I am working on displaying SQL data from an ADO.Net Entity Data model in my index.cshtml. Here is the home controller behind this page: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst ...

c#asp.netsql-serverasp.net-mvcasp.net-mvc-4

In Angular 5, you can easily prevent interaction with a related button by disabling it when the corresponding reactive

I recently encountered a situation where I needed to implement a reactive form in a component. It looked something like this... form component.html <form [formGroup]="form" class="do-form"> <div formGroupName="dot"> <div class ...

javascriptangulartypescriptangular5

resetting dropdown selections upon page refresh using jQuery and AJAX

Is there a way to reset or clear the values of two select boxes after refreshing the page in CodeIgniter? Currently, both select boxes retain their values after a refresh. Below is the code I am using: <?php echo form_dropdown('cat_id', $ ...

phpjavascriptjqueryajaxjson

The shader on the background plane takes precedence over all other elements in three.js

I'm struggling to achieve a simple setup in my scene where a plane serves as the background with a shader, and a box is placed on top with a lambert material. Despite my efforts, I can't seem to make both the plane and the box appear together. An ...

javascriptopengl-esthree.jswebgl

Attempting to include a navigation bar within the footer section of my layout page - the master page on my website

Is there a way to add a navigation bar in my footer on the layout page without having to add it to every individual page? I want the icon color for the active page to be red, but only apply this to the current page and not all pages. Currently, when I nav ...

javascripthtmlcssbootstrap-4uinavigationbar

Using AngularJS: The ultimate guide to invoking a service within a module

I have a controller that successfully calls a service. However, I now need to access a method within that service from another module. How can I achieve this? BaSiderbarService: (function() { 'use strict'; angular.module('BlurAdmi ...

javascriptangularjs

The CSRF token is required for this action to be completed

Just recently, I discovered how to set up a web server on a Raspberry Pi using Django. I'm in the process of enhancing it by integrating JS to generate a form every time data is sent. However, I've encountered an error that I haven't been ab ...

javascriptdjangoajaxcsrf-token

Is there a way to determine the amount of users who have JavaScript disabled in their browsers?

Is there a way to determine the number of users who have disabled JavaScript in their browsers? Since Google Analytics relies on JS, I'm unable to track non-JS users. Are there any tools or websites available for this purpose? ...

javascripthtml

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Currently, I have integrated Ant Design into my application as the design framework. One of the components it offers is the Carousel, which provides two methods for switching panes within the carousel. If you are interested in utilizing this feature using ...

javascriptreactjstypescriptantd

Using React hooks to control the throttle of useLayoutEffect

I am working on a code snippet that uses useLayoutEffect to attach an event listener for window resize events. I want to enhance it by adding a throttle of 1000ms, so that handleCanvasResize is only called once per second. Can anyone advise on the appropr ...

javascriptreactjs

Tips on keeping Bootstrap Modals out of your browsing history

Imagine this scenario A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below) <a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me ...

javascriptjquerytwitter-bootstrap

Script on the server side using Node.JS to make updates to a JSON file

I'm in the process of developing a NODE.JS file to update a JSON file with data coming from the client. The POST method is functioning correctly, but I am facing issues with the GET command. I was thinking about alternative approaches to tackle this i ...

javascriptjqueryjsonajaxnode.js

Running a JavaScript script within MongoDB

Seeking guidance on running a JavaScript file within MongoDB. Here is a snippet of code from my JS file: function loadNames() { print("name"); } My attempt to execute the file from the command prompt: mongo test.js resulted in the following error: ...

javascriptmongodbnosql