单选按钮的 OnChange 事件处理程序(输入类型=“单选”）不能作为一个值工作
OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
我正在寻找一个通用的解决方案。
考虑 2 个同名的无线电类型输入。提交时，选中的值确定与表单一起发送的值：
<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />
取消选择单选按钮时，不会触发更改事件。因此，如果已选择带有 value="1" 的无线电并且用户选择了第二个，则handleChange1()不会运行。这带来了一个问题(无论如何对我来说(，因为没有事件可以捕获此取消选择。
我想要的是复选框组值的onChange事件的解决方法，或者是一个 onCheck 事件，它不仅可以检测何时选中单选按钮，还可以检测何时取消选中。
我相信你们中的一些人以前遇到过这个问题。有哪些解决方法(或者理想情况下，处理此问题的正确方法是什么(？我只想捕获更改事件，访问以前检查的收音机以及新检查的收音机。
附言
onClick似乎是一个更好的(跨浏览器(事件来指示何时选中单选按钮，但它仍然不能解决未选中的问题。
类型的onChange在这种情况下确实有效是有道理的，因为它会在您选中或取消选中它时更改它提交的值。我希望单选按钮的行为更像 SELECT 元素的onChange但你能做什么......
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" />
- 使用
onclick处理程序而不是onchange- 您正在更改无线电输入的"已检查状态"，而不是value，因此不会发生更改事件。 - 使用单个函数，并将
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" />从这个例子中可以看出： 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>
j查询：
$('input[type="radio"]').on('click change', function(e) {
console.log(e.type);
});
选择单选按钮选项时会触发 click 和change事件(至少在某些浏览器中(。
我还应该指出，在我的示例中，当您使用 tab 键和键盘选择一个选项时，仍然会触发 click 事件。
因此，我的观点是，即使触发change事件是某些浏览器，click事件也应该提供您需要的覆盖范围。
您可以添加以下 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>
使用 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/
最简单，功能齐全
使用 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将之前检查的无线电存储在变量中：
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);
我认为除了
存储以前的状态之外没有任何方法。这是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>
正如你在这里看到的：http://www.w3schools.com/jsref/event_onchange.asp单选按钮不支持 onchange 属性。
您链接的第一个 SO 问题为您提供了答案：改用 onclick 事件并检查它触发的函数中的单选按钮状态。
是的，
当前选定的单选按钮没有更改事件。但问题是当每个单选按钮都被视为一个单独的元素时。相反，无线电组应被视为单个元素，如 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/
这只是我的头顶，但您可以为每个单选按钮执行一个 onClick 事件，为它们提供所有不同的 ID，然后在事件中创建一个 for 循环以遍历组中的每个单选按钮，并通过查看"checked"属性找到检查了哪个。 选中的 id 将存储为变量，但您可能希望首先使用 temp 变量来确保该变量的值已更改，因为无论是否选中了新的单选按钮，都会触发 click 事件。
<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);
}
}
这对
我有用
<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>
这是最简单和最有效的函数，只需向选中 = false 添加任意数量的按钮，并使每个单选按钮的 onclick 事件调用此函数。为每个无线电指定一个唯一的编号按钮
function AdjustRadios(which)
{
if(which==1)
document.getElementById("rdpPrivate").checked=false;
else if(which==2)
document.getElementById("rdbPublic").checked=false;
}
出于某种原因，最好的答案对我不起作用。
我通过使用改进了最佳答案
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">
dr
"FocusOut"在"更改"事件之前调度 - 示例：
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);
});
斯菲德尔
相关文章：
- 用javascript将script元素附加到头部;铬不能工作
- 为什么jQuery代码段在没有IFrame的情况下可以工作，而在有IFrame时却不能工作
- 为什么当async标志设置为false时，xmlhttprequest中的代码可以工作，而当它设置为true时却不能工作
- 引导程序's的javascript在本地工作，但在部署到服务器时不能工作
- JQuery脚本没有'Don’我不能工作两次
- "npm运行构建:css"不能工作，而当我自己运行脚本时是可以的
- ng样式在与的预标记中！重要的是不能工作
- angularjs 控制器在指令中使用控制器作为不能工作
- jQuery LightSlider不能工作，但在JSFiddle中工作得很好
- Javascript - 我如何让一个语句工作一次，如果它已经工作了 1 次，则不能工作，然后再次工作
- 我的查询获胜'因为一个剧本，它不能工作(它以错误的方式工作）！?但为什么呢?SESSIONS和PHP
- 我的Javascript代码没有'铬不能工作
- 使用JQuery调整图像大小和重新排列图像;第一次装载时不能工作
- 为什么不是'这个Javascript计算器不能工作
- Javascript在窗口中返回.onbeforeunload不会'铬不能工作
- Javascript代码包含在html中时可以工作，但单独加载/注入时则不能工作
- 简单的jquery选择器不会;铬不能工作
- 为什么不'这个Javascript函数不能工作
- 为什么不'这个js数组函数不能工作
- 视口比例;方向改变后不能工作
