Check if Radio Button Value checked

Question

<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_1" value="2" />Not Public
         <input type="radio" name="radio_1" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_2" value="1" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_2" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_3" value="1" />Public
         <input type="radio" name="radio_3" value="2" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>

hi,

If i select first option in the first row of radio buttons. In the second row i don't check the first option because first option is already checked in the first row.. I need a jquery validation for this

Please someone help me!

It seems that you actualy want to allow user to prioritize list of values. Like "Public" gona be 1st, "Confidential" - second etc. Is that the task? — Alexander Taran
– Alexander Taran, Commented Dec 31, 2009 at 14:07
It's really simple to do if you're able to use javascript. Is that an option? — ChadNC
– ChadNC, Commented Dec 31, 2009 at 14:19

BalusC · Accepted Answer · 2009-12-31 14:38:22Z

You need to rearrange the names/values of the radio buttons.

<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_2" value="1" />Not Public
         <input type="radio" name="radio_3" value="1" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="2" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_3" value="2" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="3" />Public
         <input type="radio" name="radio_2" value="3" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>

The value now denotes the order instead of the name. This is much easier. No need for JS validation.

Atom Vayalinkal · Accepted Answer · 2011-03-25 08:21:51Z

if i understand correctly this should work

function valForm(form) {
var btn1 = parseInt(form.radio_1.value, 10) || 0;
var btn2 = parseInt(form.radio_2.value, 10) || 0;
var btn3 = parseInt(form.radio_3.value, 10) || 0;
btn = (btn1 + btn2 + btn3)
if (btn < 3) alert('Select a button, homie'); 
else alert('Button value ' + btn + ' selected');
}

on jsfiddle. since 3 is the least possible value if all the checkboxes are selected we check if btn in less than 3 or more.

<head>
<script type="text/javascript">
function valForm(form) {
var btn1 = parseInt(form.radio_1.value, 10) || 0;
var btn2 = parseInt(form.radio_2.value, 10) || 0;
var btn3 = parseInt(form.radio_3.value, 10) || 0;
btn = (btn1 + btn2 + btn3)
if (btn < 3) alert('Select a button, homie'); 
else alert('Button value ' + btn + ' selected');
}
</script>

</head>
<body>
<form name="theatomicform">
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_1" value="2" />Not Public
         <input type="radio" name="radio_1" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_2" value="1" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_2" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_3" value="1" />Public
         <input type="radio" name="radio_3" value="2" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>
<input value="Validate" type="button" onClick="valForm(theatomicform)">
</form>
</body>

cast01 · Accepted Answer · 2009-12-31 14:13:36Z

I suppose the easiest way would be to check for the click action in jquery

so you would have..

$(input[type=radio]).click(function() {
  //Store THIS object
  var $this = $(this);

  //Get the id of this radio button
  var $id = $this.attr('id');

  //If radio button is selected
  if($this.is(':selected') {  

    //Disable all other radio buttons with this id.
    $('#' + $id).changeClass("disabled");

  } else {
    //Else it is being unselected, so enable radio buttons with id.
    $('#' + $id).changeClass("enabled");
  }
};

A few points..

Im not sure if if($this.is(':selected') is the best way to check on radio buttons, but a similar method works with check boxes
Instead of changing the class you may want to jsut alter an attribute or a css propterty.

Collectives™ on Stack Overflow

Check if Radio Button Value checked

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related