CODEWITHSUNDEEP
htmlradio-button
Bala
Bala

Reputation: 1

Check if Radio Button Value checked

<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!

Upvotes: 0

Views: 3660

Answers (3)

Atom Vayalinkal
Atom Vayalinkal

Reputation: 2692

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>

Upvotes: 1

BalusC
BalusC

Reputation: 1108557

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.

Upvotes: 2

cast01
cast01

Reputation: 663

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.

Upvotes: 0

Related Questions