我在寻找一个广义解。

考虑具有相同名称的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,但你能做什么…


当前回答

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

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

    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>

点击这里

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

其他回答

这对我很有用

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

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/

这是最简单和最有效的函数,只需添加尽可能多的按钮到checked = 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>

点击这里

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