单选按钮(INPUT type="radio")的OnChange事件处理程序不能作为一个值工作

我在寻找一个广义解。

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

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

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

我想要的是针对复选框组值的onChange事件的解决方案，或者，一个onCheck事件，它不仅检测单选按钮何时被选中，而且还检测它何时未选中。

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

< p >注:< br / > onClick似乎是一个更好的(跨浏览器)事件来指示单选按钮何时被选中，但它仍然不能解决未选中的问题

我想这是有道理的，为什么复选框类型的onChange在这种情况下是有效的，因为它改变了它提交的值，当你选中或取消选中它。我希望单选按钮的行为更像一个SELECT元素的onChange，但你能做什么…

1011570 次浏览
小开

如你所见: http://www.w3schools.com/jsref/event_onchange.asp 单选按钮不支持onchange属性

你链接的第一个SO问题给出了答案:使用onclick事件，并检查它触发的函数内部的单选按钮状态。

小开

这只是我的头顶，但你可以为每个单选按钮做一个onClick事件，给他们所有不同的id，然后在事件中做一个for循环，遍历组中的每个单选按钮，并通过查看'checked'属性找到哪个被检查了。选中按钮的id将存储为变量，但您可能希望首先使用临时变量以确保该变量的值发生了变化，因为无论是否选中新的单选按钮，都将触发click事件。

小开

正如你可以从这个例子中看到的: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);
});

click和change事件都是在选择单选按钮选项时触发的(至少在某些浏览器中)。

我还应该指出，在我的例子中，当你使用tab和键盘选择一个选项时，click事件仍然被点燃。

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

小开

是，当前所选单选按钮没有更改事件。但问题是，当每个单选按钮被视为一个单独的元素。相反，无线电组应该被认为是像select这样的单个元素。所以改变事件被触发。如果它是select元素，我们从不担心其中的每个选项，而只取所选的选项。我们将当前值存储在一个变量中，当选择一个新选项时，该变量将成为前一个值。同样，你必须使用一个单独的变量来存储选中单选按钮的值。

如果你想识别前一个单选按钮，你必须循环mousedown事件。

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/

小开

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

超文本标记语言

<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);
小开
最佳答案 

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>

下面是一个JSFiddle演示:https://jsfiddle.net/crp6em1z/

小开

我想做两点改变:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />
  1. 使用onclick处理程序而不是onchange -您更改的是无线电输入的“已检查状态”，而不是value，因此不会发生更改事件。
  2. 使用单个函数，并传递this作为参数，这将容易检查当前选择的值。

ETA:与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" />

小开
我认为除了存储之前的状态之外没有其他方法。 下面是jQuery

的解决方案 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var lastSelected;
$(function () {
//if you have any radio selected by default
lastSelected = $('[name="myRadios"]:checked').val();
});
$(document).on('click', '[name="myRadios"]', function () {
if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
}
lastSelected = $(this).val();
});
</script>


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

在考虑了一会儿之后，我决定去掉变量并添加/删除类。这是我得到的:http://jsfiddle.net/BeQh3/2/

小开

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

<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>
小开 
<input type="radio" name="brd" onclick="javascript:brd();" value="IN">
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">`
<script type="text/javascript">
function brd() {alert($('[name="brd"]:checked').val());}
</script>
小开

如何使用Jquery的变化事件?

$(function() {
$('input:radio[name="myRadios"]').change(function() {
if ($(this).val() == '1') {
alert("You selected the first option and deselected the second one");
} else {
alert("You selected the second option and deselected the first one");
}
});
});

jsfiddle: http://jsfiddle.net/f8233x20/

小开

如果希望避免使用内联脚本，可以简单地侦听广播上的单击事件。这可以通过简单的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);
}
}
小开
这是最简单和最有效的函数，只需添加尽可能多的按钮到checked = false，并使每个单选按钮的onclick事件调用此函数。为每个收音机指定一个唯一的号码 按钮< / p > 
function AdjustRadios(which)
{
if(which==1)
document.getElementById("rdpPrivate").checked=false;
else if(which==2)
document.getElementById("rdbPublic").checked=false;
}
小开

这对我很有用

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM


<script type="text/javascript">
function convenio_unam(){
if(this.document.getElementById('TIPO_INST-0').checked){
$("#convenio_unam").hide();
}else{
$("#convenio_unam").show();
}
}
</script>
小开

您可以添加以下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只读无线电输入

document.addEventListener('input',(e)=>{


if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2

小开

出于某种原因，最好的答案对我来说并不适用。

我通过实践改进了最佳答案

    var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');

原最佳答案用法:

      var rad = document.myForm.myRadios;

其他人保持不变，最后对我有用。

var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');
console.log('overlayType_radio', overlayType_radio)


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

html是:

<div id='overlay-div'>
<fieldset>
<legend> Overlay Type </legend>
                                

<p>
<label>
<input class='with-gap' id='overlayType_image' value='overlayType_image' name='radio_overlaytype' type='radio' checked/>
<span>Image</span>
</label>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_tiled_image' value='overlayType_tiled_image' name='radio_overlaytype' type='radio' disabled/>
<span> Tiled Image</span>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_coordinated_tile' value='overlayType_coordinated_tile' name='radio_overlaytype' type='radio'  disabled/>
<span> Coordinated Tile</span>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_none' value='overlayType_none' name='radio_overlaytype' type='radio'/>
<span> None </span>
</p>


                                  

</fieldset>
</div>


 var overlayType_radio = document.querySelectorAll('input[type=radio][name="radio_overlaytype"]');
console.log('overlayType_radio', overlayType_radio)


var prev = null;
for (var i = 0; i < overlayType_radio.length; i++) {
overlayType_radio[i].addEventListener('change', function() {
(prev) ? console.log('radio prev value',prev.value): null;
if (this !== prev) {
prev = this;
}
console.log('radio now value ', this.value)
});
}
<div id='overlay-div'>
<fieldset>
<legend> Overlay Type </legend>
                                    

<p>
<label>
<input class='with-gap' id='overlayType_image' value='overlayType_image' name='radio_overlaytype' type='radio' checked/>
<span>Image</span>
</label>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_tiled_image' value='overlayType_tiled_image' name='radio_overlaytype' type='radio' />
<span> Tiled Image</span>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_coordinated_tile' value='overlayType_coordinated_tile' name='radio_overlaytype' type='radio'  />
<span> Coordinated Tile</span>
</p>


<p>
<label>
<input class='with-gap' id='overlayType_none' value='overlayType_none' name='radio_overlaytype' type='radio'/>
<span> None </span>
</p>


                                      

</fieldset>
</div>

jsfiddle点击这里

https://jsfiddle.net/hoogw/jetmkn02/1/

小开 
<script>
function radioClick(radio){
alert()
}
</script>


<label>Cash on delivery</label>
<input type="radio" onclick="radioClick('A')" name="payment_method" class="form-group">


<br>


<label>Debit/Credit card, GPay, Paytm etc..</label>
<input type="radio" onclick="radioClick('B')" name="payment_method" class="form-group">
小开

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

jsfiddle


提交答案