我在寻找一个广义解。

考虑具有相同名称的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" /> .

其他回答

如果希望避免使用内联脚本,可以简单地侦听广播上的单击事件。这可以通过简单的Javascript监听点击事件来实现

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

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

最简单和动力十足

使用getAttribute只读无线电输入

文件。addEventListener“输入”,(e) = > { 如果目标(e。“name”getAttribute () = = myRadios”) 控制台日志(e .目标。价值) }) <输入类型=“无线电 <输入类型=“无线电

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事件应该提供所需的覆盖范围。