我在寻找一个广义解。

考虑具有相同名称的2个无线电类型输入。当提交时,被选中的值决定随表单一起发送的值:

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

取消选择单选按钮时,更改事件不会触发。因此,如果值="1"的无线电已经被选中,而用户选择了第二个,则handleChange1()不会运行。这就出现了一个问题(至少对我来说),因为我无法捕捉到这种去选择。

我想要的是一个变通的onChange事件的复选框组值,或者,一个onCheck事件,不仅检测单选按钮是选中的,而且当它是未选中的。

我相信你们中的一些人以前遇到过这个问题。有什么变通办法(或者理想情况下,什么是处理这个问题的正确方法)?我只是想捕捉变化事件,访问以前检查的收音机以及新检查的收音机。

注: onClick似乎是一个更好的(跨浏览器的)事件来指示选中单选按钮,但它仍然不能解决未选中的问题。

我认为这是有意义的,为什么onChange复选框类型在这样的情况下工作,因为它改变了它提交的值,当你勾选或取消勾选它。我希望单选按钮表现得更像一个SELECT元素的onChange,但你能做什么…


当前回答

我想做两点改变:

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

使用onclick处理程序而不是onchange -您正在更改无线电输入的“已检查状态”,而不是值,因此不会发生更改事件。 使用单个函数,并将其作为参数传递,这将便于检查当前选择的值。

ETA:除了handleClick()函数,您还可以在页面作用域变量中跟踪收音机的原始/旧值。那就是:

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

var currentValue = 0; 函数handleClick(myRadio) { alert('旧值:' + currentValue); alert('新值:' + myRadio.value); currentValue = myRadio.value; } <input type="radio" name=" my" onclick="handleClick(this);" value="1" /> . <input type="radio" name=" my" onclick="handleClick(this);" value="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事件应该提供所需的覆盖范围。

博士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);
});

斯菲德尔

这是最简单和最有效的函数,只需添加尽可能多的按钮到checked = false,并使每个单选按钮的onclick事件调用此函数。为每个收音机指定一个唯一的号码 按钮

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

您可以添加以下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>

This is just off the top of my head, but you could do an onClick event for each radio button, give them all different IDs, and then make a for loop in the event to go through each radio button in the group and find which is was checked by looking at the 'checked' attribute. The id of the checked one would be stored as a variable, but you might want to use a temp variable first to make sure that the value of that variable changed, since the click event would fire whether or not a new radio button was checked.