OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

javascript html cross-browser

2022-08-30 00:27:46

I'm looking for a generalized solution for this.

Consider 2 radio type inputs with the same name. When submitted, the one that is checked determines the value that gets sent with the form:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

The change event does not fire when a radio button is de-selected. So if the radio with is already selected and the user selects the second, does not run. This presents a problem (for me anyway) in that there is no event where I can catch this de-selection.value="1"handleChange1()

What I would like is a workaround for the event for the checkbox group value or alternatively, an event that detects not only when a radio button is checked but also when it is unchecked.onChangeonCheck

I'm sure some of you have run into this problem before. What are some workarounds (or ideally what is the right way to handle this)? I just want to catch the change event, access the previously checked radio as well as the newly checked radio.

P.S.
seems like a better (cross-browser) event to indicate when a radio button is checked but it still does not solve the unchecked problem.onClick

I suppose it makes sense why for a checkbox type does work in a case like this since it changes the value that it submits when you check or un-check it. I wish the radio buttons behaved more like a SELECT element's but what can you do...onChangeonChange

答案 1

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

Here's a JSFiddle demo: https://jsfiddle.net/crp6em1z/

答案 2

I would make two changes:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

Use the handler instead of - you're changing the "checked state" of the radio input, not the , so there's not a change event happening.onclickonchangevalue
Use a single function, and pass as a parameter, that will make it easy to check which value is currently selected.this

ETA: Along with your function, you can track the original / old value of the radio in a page-scoped variable. That is:handleClick()

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />