CODEWITHSUNDEEP
javascriptradio-button
Iti Tyagi
Iti Tyagi

Reputation: 3661

Radio Buttons clear check when clicked again

I have a set of three radio buttons and they have mutual exclusion in them, as I implemented group name property, but the problem is, in the initial stage, none of the radio button is selected,enter image description here

But when I select any of the radio button, then I cannot deselect the same, although mutual exclusion is in progress, but I want them to deselect as well.

enter image description here

My code aspx is:

<td>
<asp:RadioButton ID="AChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="DChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="WChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>

Upvotes: 0

Views: 5659

Answers (5)

Tracker1
Tracker1

Reputation: 19334

You would need to use javascript...

doing binding in jquery, it's easier, and the name= should match your rendered groupname "name=" attribute...

var lastChecked = null;
$('input[name=A]').click(function(){
  if (lastChecked == this) {
    this.checked = false;
    lastChecked = null;
  }
  lastChecked = this;
});

Upvotes: 1

Michael Kniskern
Michael Kniskern

Reputation: 25260

Here is a similar implementation using the attribute ondblclickand jQuery. Also, this will allow you to include this functionality within controls with a dynamically generated client ID.

Code behind:

foreach (ListItem li in rbl.Items)
    li.Attributes.Add("ondblclick", string.Format("clearCurrentRadioButtonSelection(\"{0}\")", rbl.UniqueID));

ASPX page

function clearCurrentRadioButtonSelection(controlName) {
    var id = "input[name=" + controlName + "]";

    $(id).each(function () {
        $(this).attr('checked', false);
    });
}

Upvotes: 0

Aashray
Aashray

Reputation: 2753

You can deselect a radio button by using the attribute ondblclick. 

<input type="radio" name="RadioGroup1
" value="1" ondblclick="uncheckRadio();">
    Apple</label>

When you double click on the radio button, just call a javascript function to set the checked property to false.

function uncheckRadio() {
 var choice = document.form1.RadioGroup1;
 for (i = 0; i < choice.length; i++) {
  if ( choice[i].checked = true ) 
   choice[i].checked = false; 
 }
}

Upvotes: 0

mshsayem
mshsayem

Reputation: 18008

Use this to deselect:

var radios = document.getElementsByName('A');
for(var i=0; i<radios.length; i++)
{
    radios[i].checked = false;
}

Upvotes: 0

PA.
PA.

Reputation: 29339

You have both a code problem and a misunderstanding.

The misunderstanding is about how the mutual exclusion radio buttons work (or are supposed to work) (or are expected by the users to work).

The code problem is that in a mutually exclusion radio buttons group you need to initially select one of them.

So, I believe there are two ways of solving the problem:

  1. Keep the radio buttons groud. Add a "none" button to the set, so that it works as if none of the other three are selected. And initially select this "none" button.

  2. change the radio buttons to check boxes, so the user might select and deselect each of them. Then implement your own exclusion logic. I don't recommend this one.

Upvotes: 2

Related Questions