Question

<input type="radio" name="group" value="book_folder" onchange="makeRadioButtons()">Create New Book</input>

<input type="radio" name="group" value="book_chapter" onchange="makeCheckBoxes()">Create New Chapter</input>

I was using the above code and when I clicked the second radio button, I thought I should get two events, one from the button that got unchecked and other from the button that got checked, because logically speaking, both buttons got their state changed, and I have bound the onchange() event not the onclick() event. But as it seems I only get one event from the button that just got checked. Is this a desired behaviour in HTML? How can I get an event from the button if it got unchecked?

Answer 1

Use this to get the desired behavior:-

var ele = document.getElementsByName('group');
var i = ele.length;
for (var j = 0; j < i; j++) {
    if (ele[j].checked) { //index has to be j.
        alert('radio '+j+' checked');
    }
    else {
        alert('radio '+j+' unchecked');
    }
}

Hope it helps.