CODEWITHSUNDEEP
javascriptjqueryjquery-events
user1502223
user1502223

Reputation: 645

Radio Buttons fire Event When BOTH Values are ON and ON

I'm trying to fire an event when the user clicks on the On and On value on two sets of RADIO BUTTONS....

So when the user clicks on the first ON its says and alert comes up that says ON.

When the user clicks off an alert comes up that says OF.F

When the user clicks on the second ON its pops an alert that says ON1 when they click off it says OFF2.

When they click on ON and ON it says something different like ON AND ON.

Here is the js:

 $('.radioButton').click(function(e){
   selected = $(this).val();
   if (selected === 'on'){
     alert('on')
   }

   else if (selected === 'off'){
     alert('off')
   }

   else if (selected === 'on1'){
     alert('on1')
   }

   else if (selected === 'off1'){
     alert('off1')
   }

   else if (selected === 'on' && 'on1'){
     alert('on and on')
   }

  });

Here is the fiddle:

http://jsfiddle.net/d0okie0612/3u4Hj/

Upvotes: 0

Views: 95

Answers (1)

svk
svk

Reputation: 5919

First off, give the radio buttons a name attribute to tell the sets apart:

<input name="one" class="radioButton" id="r1" type="radio" value="on">
<input name="one" class="radioButton" type="radio" value="off">
<input name="two" class="radioButton" type="radio" value="on1">
<input name="two" class="radioButton" type="radio" value="off1">

You can then check which value is checked for each set like this:

var oneOn = $('input:radio[name=one]:checked').val();
var twoOn = $('input:radio[name=two]:checked').val();

Finally:

if(oneOn === 'on' && twoOn === 'on1') {
    alert("yes!");
}

Your original approach cannot work because "selected" can't have two different values at once.

Upvotes: 2

Related Questions