您可以添加以下JS脚本

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='myRadios']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

博士Tl;

'focusout'在'change'事件之前被分派-示例:

const radioName = 'radio';

// Add radios
document.body.innerHTML = `
<style>
input + label {
  margin-left: 1rem;
}
</style>
<form action="#" name="example-form">
  <fieldset>
    ${Array(5).fill(null, 0, 5).map((_, i) => {
        const offsetId = i + 1;
        const id = `radio-${offsetId}`;
        return `<label for="${id}">Radio ${offsetId}</label>
        <input type="radio" name="${radioName}" id="${id}" value="${offsetId}" />`;
      }).join('\n')}
  </fieldset>
</form>
`;

const {log} = console,

    form = document.forms['example-form']; 

form.addEventListener('submit', e => e.preventDefault());

form.addEventListener('change', e => {
    const {target} = e;
    if (target.matches(`[type="radio"][name="${radioName}"]`)) {
        log(`[${e.type}]: "${target.id}" selected;  Value: ${target.value}`);
    }
});

form.addEventListener('focusout', e => {
    const {target} = e,

        soonToBePrevValue = target && target.form ? 
            target.form.elements[radioName].value : null;
    
    if (!target.matches(`[type="radio"][name="${radioName}"]`) || !soonToBePrevValue) {
        return;
    }

    // value, for '[name="radio"]', contained in form, will change after 'focusout' event
    // has completed it's bubbling stage.
    log(`[${e.type}]: previously selected radio value: ` + 
        `${soonToBePrevValue}`);
        
    // log("Soon to be \"previous\" radio: ", target);
});

斯菲德尔

我知道这是一个老问题，但这段代码适合我。也许将来有人会发现它很有用:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

将之前选中的radio存储在一个变量中: http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

Js示例代码

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

Yes there is no change event for currently selected radio button. But problem is when each radio button is taken as a separate element. Instead a radio group should be considered a single element like select. So change event is triggered for that group. If it is a select element we never worry about each option in it, but take only the selected option. We store the current value in a variable which will become the previous value, when a new option is selected. Similarly you have to use a separate variable for storing value of checked radio button.

如果您想要识别前一个单选按钮，则必须循环鼠标按下事件。

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

请看这个:http://jsfiddle.net/diode/tywx6/2/

从这个例子中可以看到:http://jsfiddle.net/UTwGS/

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

在选择单选按钮选项时(至少在某些浏览器中)会触发单击和更改事件。

我还应该指出，在我的例子中，当您使用tab和键盘选择一个选项时，单击事件仍然会触发。

因此，我的观点是，即使某些浏览器触发了change事件，但click事件应该提供所需的覆盖范围。