Question

我需要一个单选按钮的事件触发器，当它被取消选中时，因为检查了另一个按钮。

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

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

这与复选框的预期一致。如果您选中一个，则会收到警告“您的项目已更改为已选中”。如果您取消选中它，则会收到警告“您的项目已更改为未选中”。

使用单选按钮，当您选中按钮1时，您会按预期获得警报“您的项目已更改为已选中”，因为该按钮已从未选中更改为已选中。但是，当您检查第二个按钮并且第一个单选按钮从已选中更改为未选中时，“onchange”事件触发器不会触发，并且不会触发“其他”警报。

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

我感谢大家对此的帮助。

- Kenoli

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

Answer 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.')
      }
    });
  });
});

Answer 2

单选按钮取消选中时没有任何事件。您可以使用onpropertychange事件，但这不是标准化事件，因此它可能只能在Internet Explorer中使用。

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

Answer 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.");
            }
        });
    });
});

Answer 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)
        }
    }
}

（我确实将它从coffeescript转换为javascript for ya'll。）

Answer 5

单选按钮具有相同的名称，因此我们可以按名称选择它们。因为取消选中广播时.change()不受影响，所以我们使用.click()代替。{/ p>

$('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');
});

我需要一个单选按钮的事件触发器，当它被取消选中时，因为检查了另一个按钮

5 个答案: