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

我在寻找一个广义解。

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

2012-01-26 20:39:53

其他回答

我想做两点改变:

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

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

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

2012-01-26 20:39:53

<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>

2013-11-20 13:39:08

var rad = document. myform . mybroadcasts; Var prev = null; For (var I = 0;I < rad.length;我+ +){ rad[我]。addEventListener('change'， function() { (上一页)?console.log (prev.value):空; If (this !== prev) { Prev = this; ｝ console.log (this.value) })；｝ <表单名称= " myForm " > <input type="radio" name=" mybroadcasts " value="1" /> <input type="radio" name=" mybroadcasts " value="2" /> > < /形式

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

2012-01-25 02:49:09

<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">

2020-12-20 16:00:41

从这个例子中可以看到: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事件应该提供所需的覆盖范围。

2012-01-12 16:51:47

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

推荐文章

最新文章

标签