我需要一个单选按钮的事件触发器，当它被取消选中时，因为检查了另一个按钮
[英]I need an event trigger for a radio button for when it is unchecked because another button is checked
问题描述
I need an event trigger for a radio button for when it is unchecked because another button is checked. 
我需要一个单选按钮的事件触发器，当它被取消选中时，因为检查了另一个按钮。
The code below should demonstrate my dilemma. 下面的代码应该证明我的困境。
If you will notice, there is an onchange event trigger atttached to each radio button and checkbox in the html code. 如果你注意到，有一个onchange事件触发器附加到每个单选按钮和html代码中的复选框。 In theory a change in state from checked to unchecked should fire the onchange event. 从理论上讲，状态从检查到未检查的变化应该触发onchange事件。
This happens as expected with the check boxes. 这与复选框的预期一致。 If you check one, you get the alert, 'Your item is changed to checked'. 如果您选中一个，则会收到警告“您的项目已更改为已选中”。 If you uncheck it, you get the alert, 'Your item is changed to unchecked'. 如果取消选中它，则会收到警告“您的项目已更改为未选中”。
With the radio buttons, when you check button one, you get, as expected, the alert, 'Your item is changed to checked' since the button changed from unchecked to checked. 使用单选按钮，当您选中按钮1时，您会按预期获得警报“您的项目已更改为已选中”，因为该按钮已从未选中更改为已选中。 However, when you check the second button and the first radio button is changed from checked to unchecked the "onchange" event trigger does not fire and the 'else' alert is not triggered. 但是，当您选中第二个按钮并且第一个单选按钮从已选中更改为未选中时，“onchange”事件触发器不会触发，并且不会触发“其他”警报。
So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked? 所以对我来说这个问题是当一个单选按钮被另一个被检查的按钮取消选中时会触发什么事件？
I appreciate everyone's assistance on this. 我感谢大家对此的帮助。
--Kenoli --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>
5 个解决方案
解决方案1
6 2012-05-31 01:51:23
I came here looking for a quick solution for this type of problem, and nuc's answer helped me come up with this: 我来这里寻找这类问题的快速解决方案，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
2 2010-09-24 21:01:24
There is no event for when a radio button gets unchecked. 单选按钮取消选中时没有任何事件。 You might be able to use the onpropertychange event, however that's not a standardised event so it might only work in Internet Explorer. 您可以使用onpropertychange事件，但这不是标准化事件，因此它可能只能在Internet Explorer中使用。
The safest way would be to take care of that in the onchange event. 最安全的方法是在onchange事件中处理这个问题。 If you want to know which radio button was unchecked, you would have to keep a reference to the currently checked element in a variable. 如果您想知道哪个单选按钮未选中，则必须保留对变量中当前已检查元素的引用。
解决方案3
0 2013-02-15 15:29:46
I slightly modified rthbound's code to handle a group of radio input's, in my case enclosed in a <table> . 我略微修改了rthbound的代码来处理一组无线电输入，在我的情况下用<table>括起来。 But this could easily altered for a <div> . 但这很容易改变为<div> 。 Also this code is more compliant with jQuery 1.9. 此代码也更符合jQuery 1.9。 A common class would be better, to take the class from the selected radio and find other radio inputs with the same class, but I'm working with ASP.NET and this is quicker and easier for me. 一个常见的类会更好，从选定的无线电中取出类并找到具有相同类的其他无线电输入，但我正在使用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
0 2013-03-21 21:06:20
I've solved this issue in a generic way: 我以一般方式解决了这个问题：
whenever a radio button is changed: 每当更改单选按钮时：
- if they were triggered by this system - we don't want unending loops. 如果它们是由这个系统触发的 - 我们不希望无休止的循环。
- find all its radio button friends 找到所有单选按钮的朋友
- trigger change on them 触发对它们的改变
then I can test for whether the radio button was checked or unchecked. 然后我可以测试单选按钮是否已选中或未选中。
$(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)
}
}
}
(I did translate it from coffeescript to javascript for ya'll.) （我确实将它从coffeescript转换为javascript for ya'll。）
解决方案5
0 2013-07-08 11:56:15
The Radio buttons have same name, so we can select them by name. 单选按钮具有相同的名称，因此我们可以按名称选择它们。 Because .change() is not effected when the radio is unchecked, so we use .click() instead of. 由于.change()当无线电设备不受影响选中，所以我们使用.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');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.