首页 文章

单选按钮的OnChange事件处理程序（INPUT type =“radio”）不能作为一个值工作

提问于
浏览 次
130

我正在寻找一个通用的解决方案 .

考虑具有相同名称的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 for checkbox类型在这种情况下工作是有道理的，因为它会更改它在检查或取消选中时提交的值 . 我希望单选按钮的行为更像是SELECT元素的onchange但是你能做什么......

javascript html cross-browser

14 回答

  • 4
    <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].addEventListener('change', function() {
            (prev)? console.log(prev.value):null;
            if(this !== prev) {
                prev = this;
            }
            console.log(this.value)
        });
    }
</script>

    这是一个JSFiddle演示：https://jsfiddle.net/crp6em1z/

    回复于
  • 5

    如果您想避免使用内联脚本，只需在收音机上收听点击事件即可 . 这可以通过听取点击事件来使用普通的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);
      }
}
    回复于
  • 2

    这是最容易和最有效的功能，只需添加任意数量的按钮，你可以使用checked = false，并使每个单选按钮的onclick事件调用此函数 . 为每个单选按钮指定一个唯一的编号

    function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;

    }

    回复于
  • 4

    使用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/

    回复于
  • 6

    我会做两个改变：

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

    • 使用 onclick 处理程序而不是 onchange - 您正在更改无线电输入的"checked state"，而不是 value ，因此没有发生更改事件 .

    • 使用单个函数，并将 this 作为参数传递，这样可以轻松检查当前选择的值 .

    ETA：与 handleClick() 函数一起，您可以在页面范围的变量中跟踪无线电的原始/旧值 . 那是：

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

    这对我有用

    <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>
    回复于
  • 2

    这只是我的头脑，但你可以为每个单选按钮执行onClick事件，为它们提供所有不同的ID，然后在事件中进行for循环以遍历组中的每个单选按钮并查找哪个是通过查看“已检查”属性进行检查 . 已检查的id将作为变量存储，但您可能希望首先使用temp变量来确保该变量的值发生更改，因为无论是否选中了新的单选按钮，click事件都会触发 .

    回复于
  • 5
    <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>
    回复于
  • 1

    从这个例子中可以看出：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 事件（至少在某些浏览器中） .

    我还应该指出，在我的示例中， click 事件 is still fired 当您使用选项卡和键盘选择一个选项时 .

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

    回复于
  • 2

    是的，当前选择的单选按钮没有更改事件 . 但问题是每个单选按钮被视为一个单独的元素 . 相反，无线电组应被视为像 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/

    回复于
  • 26

    我认为除了存储以前的状态之外没有任何其他方法 . 这是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/

    回复于
  • 0

    正如您在此处所见：http://www.w3schools.com/jsref/event_onchange.asp单选按钮不支持onchange属性 .

    由您链接的第一个SO问题为您提供答案：改为使用 onclick 事件并检查它触发的函数内部的单选按钮状态 .

    回复于
  • 80

    将先前检查的无线电存储在变量中：
    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);
    回复于
  • 4

    我意识到这是一个老问题，但是这个代码片段对我有用 . 也许未来有人会发现它很有用：

    <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

    

<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>
    回复于

相关问题