Triggering radio button event

JavaScript
1

I want an event trigger to call an AJAX function on a radio button element when it changes as a result of another button being selected.

Using ONCHANGE has no effect. It triggers the event when that button is selected, but nothing happens when it is unselected as a result of another button being selected.

I’m doing something like this:

if (button1.checked) {do action1} else {do action2};

When I click on that button, action1 takes place, but when I click another button, either nothing happens or action1 takes place again (I can’t tell which, I just know the state doesn’t change).

As far as I can figure, being unselected by clicking on another button either does not create an ONCHANGE event for the button previously selected or it happens before its “checked” state changes so my function thinks it is still checked.

Can anyone help me with this?

Thanks,

–Kenoli

2

You probably need to use an elements click() method.

This is a quick demo.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
function myFunction(status) {
     if(status) {
         alert("Do this");
     } else {
         alert("Do something else");
     }
}
 
</script>
 
</head>
<body>
<div>
 
<input type="checkbox" onclick="document.getElementById('chk1').click();">Click me to click "Checkbox 2"
 
<br /><br /><br />
 
<input type="checkbox" name="chk1" id="chk1" value="chk1_value" onclick="myFunction(this.checked)"> Checkbox 2
 
</div>
 
</body>
</html>
3

Thanks, but, as you demonstrate, what I am struggling with works fine with checkboxes. When I check or uncheck the box, an ONCLICK event handler fires and triggers my function related to that element in either case. The problem I have is with radio buttons. When I click one button it triggers an event for that radio button element the way I want it to. When I click another button which unchecks the first button, I want an event handler to fire and trigger a function that makes changes to the first button. If it were only two buttons, I could trigger a function on the second button and have that function make the changes I want to the first button. The problem is I have a number of buttons so the function would have to make changes to all of them which is starting to sound a bit rube goldbergish.

I’m looking for an event handler that will fire for a radio button when a click to another button unsets it.

–Kenoli

4

ok, it’s not clear to me exactly what you want from the description in your post. I would have thought you could modify the demo code to suit radio buttons.

It will help if you post your code and explain exactly what should happen when any particular button in your code is clicked.

5

I will send the code. I will have to condense it as it includes some AJAX calls and other functions that make it hard to follow.

The root of my question is this: What event trigger fires when a radio button is deselected when another button is checked?

6

http://stackoverflow.com/questions/143747/is-it-possible-to-trigger-a-links-or-any-elements-click-event-through-javascr

7

Whisher – I get an error when I try to go to the link in your email.

Kalon – I hope I inserted this code correctly and I hope it demonstrates my issue.

If you will notice, there is an onchange event trigger atttached to each radio button and checkbox in the html code. In theory a change in state from checked to unchecked should fire the onchange event.

This happens as expected with the check boxes. If you check one, you get the alert, ‘Your item is changed to checked’. If you uncheck it, you get the alert, ‘Your item is changed to unchecked’.

With the radio buttons, when you check button one, you get, as expected, the alert, ‘Your item is changed to checked’ since the button changed from unchecked to checked. However, when you check the second button and the first radio button is changed from checked to unchecked the “onchange” event trigger does not fire and the ‘else’ alert is not triggered.

So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked?

I appreciate everyone’s assistance on this.

–Kenoli



<html>
<head>
<title></title>

<script type="text/javascript">

function clickAction() {

//alert ('Your item changed');

if (this.checked == true) {alert ('Your item is changed to checked');}

else if (this.checked == false) {alert('Your item is changed to unchecked');}

}



</script>

<script type="text/javascript">

function initializeToggles() {

var button1= document.getElementById('button1');
button1.onchange = clickAction;

var box1= document.getElementById('box1');
box1.onchange = clickAction;

var box2= document.getElementById('box2');
box2.onchange = clickAction;

}

</script>

<script type="text/javascript">window.onload = initializeToggles;</script>

</head>
<body>

<input type="radio" name="testRadio" id="button1" >Button one<br/>
<input type="radio" name="testRadio" id="button2" >Button two<br/><br/>

<input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
<input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>

</body>
</html>
8

I got an answer from another forum. there doesn’t seem to be an event trigger for the event. I will try to do it another way.

Thanks all,

–Kenoli

9

I’m not sure if an even trigger is fired for the radio button in this case.

I am still not exactly sure what you want to happen when each checkbox is clicked. It would help if you state exactly what you want to happen when a particular checkbox is clicked.

Guessing a bit as to what you want, the code below has your 2 radio buttons and checkboxes. Checkbox 1 clicks radio button 1 and checkbox 2 clicks radio button 2. When a radio button is clicked, either directly or indirectly by a checkbox, clickAction() checks each radio button to see whether it is now checked or unchecked and alerts an appropriate message.

 
<html>
<head>
<title></title>
 
<script type="text/javascript">
 
function clickAction() {
 for(var i=0; i < radBtns.length; i++) {
     if(radBtns[i].checked) {
         alert(radBtns[i].id + ' is checked');
        } else {
         alert(radBtns[i].id + ' is unchecked');
        }
    }
}
 
function clickRadBtn(elemId) {
     document.getElementById(elemId).click();
}
 
var radBtns = new Array();
window.onload=function() {
     radBtns = document.getElementsByName('btnRad');
}
 
</script>
</head>
<body>
 
<input type="radio" name="btnRad" id="btnRad1" onclick="clickAction();" />Button one<br/>
<input type="radio" name="btnRad" id="btnRad2" onclick="clickAction();" />Button two<br/><br/>
 
<input type="checkbox" name="chkBox1" onclick="clickRadBtn('btnRad1')" />Box one<br/>
<input type="checkbox" name="chkBox2"  onclick="clickRadBtn('btnRad2')"  />Box two<br/><br/>
 
</body>
</html>