我需要一个单选按钮的事件触发器，因为它被选中，因为另一个按钮被选中答案

【问题标题】：I need an event trigger for a radio button for when it is unchecked because another button is checked我需要一个单选按钮的事件触发器，因为它被选中，因为另一个按钮被选中
【发布时间】：2010-09-24 20:49:38
【问题描述】：

我需要一个单选按钮的事件触发器，以便在另一个按钮被选中时取消选中它。

下面的代码应该可以证明我的困境。

如果您会注意到，html 代码中的每个单选按钮和复选框都附加了一个 onchange 事件触发器。理论上，从选中状态变为未选中状态应该触发 onchange 事件。

复选框会按预期发生。如果您选中一个，您会收到警报，“您的项目已更改为已选中”。如果您取消选中它，您会收到警报“您的项目已更改为未选中”。

使用单选按钮，当您选中第一个按钮时，您会如预期的那样收到警报，“您的项目已更改为选中”，因为该按钮从未选中变为选中。但是，当您选中第二个按钮并且第一个单选按钮从选中更改为未选中时，不会触发“onchange”事件触发器并且不会触发“else”警报。

所以对我来说这个问题是当一个单选按钮被另一个被选中的按钮取消选中时会触发什么事件？

感谢大家对此提供的帮助。

--凯诺利

    <html>
<head>
<title></title>

<script type="text/javascript">

function clickAction() {

    //alert ('Your item changed');

    if (this.checked == true) {alert ('Your item is changed to checked');}

    else if (this.checked == false) {alert('Your item is changed to unchecked');}

}



</script>

<script type="text/javascript">

function initializeToggles() {

    var button1= document.getElementById('button1');
    button1.onchange = clickAction;

    var box1= document.getElementById('box1');
    box1.onchange = clickAction;

    var box2= document.getElementById('box2');
    box2.onchange = clickAction;

}

</script>

<script type="text/javascript">window.onload = initializeToggles;</script>

</head>
<body>

<input type="radio" name="testRadio" id="button1" >Button one<br/>
<input type="radio" name="testRadio" id="button2" >Button two<br/><br/>

<input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
<input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>

</body>
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

我来这里是为了寻找此类问题的快速解决方案，nuc 的回答帮助我想出了这个：

$(document).ready(function(){
  $('input[type=radio]').change(function() {
    var selected = $(this);
    $('input[type=radio]').each(function() {
      if $(this).attr('id') != selected.attr('id') {
        console.log( $(this).attr('value') + ' was deselected because ' + selected.attr('value') + ' was clicked.')
      }
    });
  });
});

【讨论】：

这实际上不适用于多个无线电组 - 您需要检查名称属性以确保它们实际上在同一个组中。
你是对的......它需要一些轻微的修改。如果您已对其进行调整以处理多个组，请随时编辑答案。

【解决方案2】：

单选按钮未选中时没有事件。您也许可以使用onpropertychange 事件，但这不是标准化事件，因此它可能仅适用于 Internet Explorer。

最安全的方法是在 onchange 事件中处理它。如果您想知道哪个单选按钮未被选中，则必须在变量中保留对当前选中元素的引用。

【讨论】：

谢谢。这回答了我的问题。我想我可以创建一个“已检查”元素的变量并遍历它以重置这些元素。现在似乎有这么多 AJAX，取消选中单选按钮的“onunset”事件会很有用。

【解决方案3】：

我稍微修改了 rthbound 的代码来处理一组无线电输入，在我的例子中，它包含在 <table> 中。但这可以很容易地更改为<div>。此外，此代码更符合 jQuery 1.9。一个通用的类会更好，从选定的收音机中获取类并找到具有相同类的其他收音机输入，但我正在使用 ASP.NET，这对我来说更快更容易。

$(document).ready(function(){
    $(document).on("change", "input[type='radio']", function () {
        var selected = $(this);
        $(this).closest("table").find("input[type='radio']").each(function () {
            if ($(this).attr("id") !== selected.attr("id")) {
                console.log($(this).attr("value") + " was deselected because " + selected.attr("value") + " was clicked.");
            }
        });
    });
});

【讨论】：

【解决方案4】：

我已经用通用的方式解决了这个问题：

每当单选按钮更改时：

如果它们是由这个系统触发的 - 我们不希望无休止的循环。
查找所有单选按钮好友
触发更改

然后我可以测试单选按钮是选中还是未选中。

$(function(){
    $('body').on('change', 'input[type="radio"]', function(e, by_other) {
        if (!by_other) {
          $("input[type='radio'][name='" + $(this).attr('name') + "']")
            .not(this)
            .trigger('change', true)
        }
    }
}

（我确实为你们将它从咖啡脚本翻译成 javascript。）

【讨论】：

【解决方案5】：

单选按钮具有相同的名称，因此我们可以按名称选择它们。因为.change()在radio不勾选时不生效，所以我们用.click()代替。

$('input[name="your-radio-name"]').click(function() {
    var $radios = $('input[name="your-radio-name"]');
    for (var i = 0; i < $radios.length; i++) {
        var radio = $radios[i];
        if (radio != this) {
            radio = $(radio);
            // Process for unchecked radios here
        }
    }

    // Now, process for checked radio
    // alert(this.value + ' is checked'); Or
    alert($(this).val() + ' is checked');
});

【讨论】：