单选button的OnChange事件处理程序（INPUT type =“radio”）不能作为一个值工作
我正在寻找一个通用的解决scheme。
考虑2个具有相同名称的无线电typesinput。 提交时，被检查的人确定与表格一起发送的值：
<input type="radio" name="myRadios" onchange="handleChange1();" value="1" /> <input type="radio" name="myRadios" onchange="handleChange2();" value="2" /> 单选button被取消时，更改事件不会触发。 因此，如果已经select了值为“1”的无线电并且用户select第二个，则handleChange1（）不运行。 这就产生了一个问题（对我来说），因为没有什么事情可以赶上这个取消select。
我想要的是对于checkbox组值的onchange事件的替代方法，或者是一个oncheck事件，它不仅检测收音机是否被选中，而且还检测到未选中。
我相信你们之前遇到过这个问题。 什么是一些解决方法（或理想的是什么是正确的方式来处理这个）？ 我只想赶上更改事件，访问以前检查的电台以及新检查的电台。
PS
onclick似乎是一个更好的（跨浏览器）事件，以指示何时检查无线电，但它仍然不能解决未经检查的问题。
我想这是有道理的，为什么onchangecheckboxtypes在这种情况下工作，因为它会改变它提交的值时，你检查或取消检查。 我希望单选button的行为更像一个SELECT元素的onchange，但你可以做什么…
<form name="myForm"> <input type="radio" name="myRadios" value="1" /> <input type="radio" name="myRadios" value="2" /> </form> <script> var rad = document.myForm.myRadios; var prev = null; for(var i = 0; i < rad.length; i++) { rad[i].onclick = function() { (prev)? console.log(prev.value):null; if(this !== prev) { prev = this; } console.log(this.value) }; } </script>
我会做两个改变：
<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" /> <input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />
- 使用
onclick处理程序而不是onchange– 您正在更改无线电input的“已检查状态”，而不是value，所以不会发生更改事件。 - 使用单个函数，并将
this作为parameter passing，这将使您可以轻松地检查当前select哪个值。
ETA：与您的handleClick()函数一起，您可以跟踪页面作用域variables中广播的原始/旧值。 那是：
var currentValue = 0; function handleClick(myRadio) { alert('Old value: ' + currentValue); alert('New value: ' + myRadio.value); currentValue = myRadio.value; }
正如你可以从这个例子看到的： 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); });
当select单选button选项（至less在某些浏览器中）时， click和change事件都会被触发。
我还应该指出，在我的示例中，当使用Tab和键盘来select一个选项时， click事件仍然会被触发 。
所以，我的观点是，即使触发的change事件是一些浏览器， click事件应该提供您需要的覆盖范围。
我不认为有任何其他方式存储以前的状态。 这是jQuery的解决scheme
<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" />
想了一会儿，我决定摆脱variables和添加/删除类。 这是我得到的： 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>
正如你可以在这里看到的： http : //www.w3schools.com/jsref/event_onchange.asp onchange属性不支持单选button。
你连接的第一个SO问题给你的答案是：使用onclick事件，并检查它触发的函数内部的单选button状态。
是的，当前选定的单选button没有更改事件。 但问题是当每个单选button被视为一个单独的元素。 相反，广播组应该被认为是一个单一的元素，如select 。 所以更改事件是由该组触发的。 如果它是一个select元素，我们从不担心其中的每个选项，但只采用选定的选项。 当一个新选项被select时，我们将当前值存储在一个variables中，该variables将成为之前的值。 同样，你必须使用一个单独的variables来存储选中的单选button的值。
如果你想识别以前的单选button，你必须循环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/
那么使用JQuery的change事件呢？
$(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/
将以前选中的无线电存储在一个variables中：
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);
这只是我的头顶，但你可以为每个单选button做一个onClick事件，给他们所有不同的ID，然后在事件中做一个for循环，通过组中的每个单选button，find哪个是通过查看'checked'属性来检查。 被选中的人的id将被存储为一个variables，但是你可能首先要使用一个tempvariables来确保这个variables的值改变了，因为click事件会触发一个新的单选button是否被选中。
<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>
如果你想避免内联脚本，你可以简单地听收音机上的点击事件。 通过监听点击事件，可以用简单的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); } }
这是最简单和最有效的函数，只需要添加尽可能多的button，如checked = false，并使每个单选button的onclick事件调用此函数。 为每个单选button指定一个唯一的编号
function AdjustRadios(which) { if(which==1) document.getElementById("rdpPrivate").checked=false; else if(which==2) document.getElementById("rdbPublic").checked=false;
}
