unselecting radio input selection

Question

In a part of my application where i check for duplicate radio input selection and revert if its already selected to early selection.

Here is my html code ..

<input type="radio" name="A" checked="checked" onclick="return check();" />
<input type="radio" name="A" onclick="return check();" />

<br />

<input type="radio" name="B"  onclick="return check();" />
<input type="radio" name="B" checked="checked" onclick="return check();" />

Here is the javascript code

function check() {
    //logic to check for duplicate selection
    alert('Its already selected');
    return false;
}

And here is the demo The above code works fine. The issue is when the input isn't initially checked. In such condition the radio input selection doesn't revert to unchecked.

NOTE: when in checked state, returning false shows and alert and sets the check box to initial checked state. But when initially in non checked state this doesn't work.

There is no logic inside your `check` function. It runs fine by accident. — Ahmed Abbas, Mar 18 '14 at 09:25
Do you even have any check-functionallity? Or Do you looking for the actual check-functionallity? — nils, Mar 18 '14 at 09:26
have you seen this http://stackoverflow.com/a/9481272/839456? — anurupr, Mar 18 '14 at 09:40
you are trying to unselect a radio button which is already selected? — anurupr, Mar 18 '14 at 09:44
function check(e) { if (e.getAttribute('checked')) { alert('Its already selected'); e.prop('checked', false); return false; } } — vs7, Mar 18 '14 at 11:23

CJ Ramki · Answer 1 · 2014-03-19T06:29:35.797

4

In DOM ready, check if any radio button is checked or not. If any radio button is checked, increase the counter by one. In onclick of the radio button, check if the counter value is 1. if yes, return false, else increase counter by 1.

try this code,

html

<input type="radio" name="A" checked="checked" />
<input type="radio" name="A" />
<br />
<input type="radio" name="B" />
<input type="radio" name="B" />

JS

var counterA = 0;
var counterB = 0;
$(document).ready(function () {
    if ($("input:radio[name=A]").is(":checked") == true) counterA++;
    if ($("input:radio[name='B']").is(":checked") == true) counterB++;
});

$('input:radio[name=A]').click(function () {
    if (counterA == 1) {
        alert('already checked');
        return false;
    } else {
        counterA++;
    }
});
$('input:radio[name=B]').click(function () {
    if (counterB == 1) {
        alert('already checked');
        return false;
    } else {
        counterB++;
    }
});

SEE THIS DEMO

edited Mar 19 '14 at 06:29

answered Mar 18 '14 at 10:34

CJ Ramki

2,620
3
25
47

this does not work for the case iJay was asking for: if one radio is not initially selected it fails: http://jsfiddle.net/GSe56/2/ – nils Mar 18 '14 at 11:21
This solution does not scale when you have more categories. You would need to update the code each time a category is added – nils Mar 19 '14 at 06:53
I asked iJay to clearify the scenario and updated my answer accordingly. – nils Mar 19 '14 at 08:43

nils · Answer 2 · 2014-03-19T08:42:53.140

iJay wants to ask several questions and privides the same answers for each question. Each answer can only be choosen once. If a user clicks the same answer the second time a error-message should be shown.

// get all elements
var elements = document.querySelectorAll('input[type="radio"]');

/**
 * check if radio with own name is already selected
 * if so return false
 */
function check(){

  var selected_name = this.name,
      selected_value = this.value,
      is_valid = true;

  // compare with all other elements
  for(var j = 0; j < len; j++) {
      var el = elements[j];

      // does the elemenet have the same name AND is already selected?
      if(el.name != selected_name && el.value == selected_value && el.checked){
        // if so, selection is not valid anymore
          alert('Oups..! You can not select this answer a second time :( Choose another one!')

        // check current group for previous selection
        is_valid = false;
        break;
      }
  };

  return is_valid;
}

/**
 * bind your elements to the check-routine
 */
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onmousedown = check;
}

Here is a DEMO

He is not described this brief explanation in his question. Any way nice... +1 — CJ Ramki, Mar 19 '14 at 09:16
As he explained to me in the chat - I hope he will update his question to be more clear as well — nils, Mar 19 '14 at 09:44

score 1 · Answer 3 · answered Mar 18 '14 at 09:24

1

Use $yourRadio.prop('checked', false); to uncheck the specific radio.

answered Mar 18 '14 at 09:24

CREEATION

232
1
10

score 1 · Answer 4 · answered Mar 18 '14 at 09:27

1

Use like this:

function check() {
    //logic to check for duplicate selection
    var checked = true ? false : true;
    $(this).prop('checked', checked);
    return false;
}

answered Mar 18 '14 at 09:27

Bhojendra Rauniyar

83,432
35
168
231

score 1 · Answer 5 · answered Mar 18 '14 at 09:30

1) add class attribute to same type of checkbox elements(which are having same name)

   ex: class = "partyA"

2)
var sourceIdsArr = new Array();

function check() {
     $('.partyA').each(function() {
 var sourceId = $(this).val();
      if(sourceIdsArr.indexOf(sourceId) != -1){
         sourceIdsArr.push(sourceId );
      }
      else{
         alert('Its already selected');
         return false;
      }
   });

}

score 1 · Answer 6 · answered Mar 18 '14 at 09:48

Here is your code..

function check() {
        //logic to check for duplicate selection
 var selectflag=0;

 var radiovalue=document.getElementsByName("B");
 for(var i=0;i<radiovalue.length;i++)
 {
    // alert(radiovalue[i].checked);
     if(radiovalue[i].checked==true)
     {
         selectflag=1;
         break;
     }
 }
 if(selectflag==1)
 {
        alert('Its already selected');
        return false;
 }
 return true;
  }

Trigger your event on MouseDown. It will work fine.

score 1 · Answer 7 · answered Mar 18 '14 at 10:26

I think this is something you are looking for :

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

 <input type="radio" name="A" checked="checked"  onclick="return check(this);"/>
 <input type="radio" name="A" onclick="return check(this);"/>
<script>
$( document ).ready(function() {
  this.currentradio = $("input[name='A']:checked")[0];
});
function check(t) {
     var newradio= $("input[name='A']:checked")[0]; 
    if (newradio===document.currentradio){
    alert('already selected');
        return false
    }else{
    document.currentradio = $("input[name='A']:checked")[0];
    }
 }
</script>
</body>
<html>

unselecting radio input selection

7 Answers7