![](/img/trans.png)
[英]JavaScript: Set background of radio button when deselected (group of radio buttons)
[英]Radio button group - change events for buttons become deselected?
假设我有两个单选按钮组:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
似乎单击第二个按钮只会触发该按钮上的事件处理程序。 但是,第一个按钮确实被取消选择,并且在视觉上确实发生了变化。 任何人都可以验证仅在所选按钮上触发了事件,而不验证组中由于单击而被取消选择的其他按钮吗? 有什么聪明的方法来观看单选按钮上的取消选择事件?
尽管无法确认,但是事件更改触发器不会在整个组中发生。
如果您希望做到这一点,则可以使用各种JS库(例如jQuery,YUI等),甚至可以使用纯JavaScript,如下所示:
function buttonGroupChange(){
var radioElements = document.getElementsByName("radio_group_name");
for(var i = 0; i < radioElements.length; i++){
if(radioElements[i].checked == true){
//do something
}
else{
//do something
}
}
}
可以在onClick或onChange事件上调用此函数。
希望能解决您的问题。
首先,重要的是要注意,在“检查”值已更新之后,任何无线电上的“点击”事件都会触发。 这很重要-因为这意味着一旦事件触发就无法检测到上一个项目。 如果取消该事件,则实际上是在更改“ BACK”(返回)值,而不是最初停止它。 这对于您解决问题的方式很重要。
例:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
// At this point, the ':checked' item is button1.
$('input[type=radio]').bind('click', function (ev) {
// If you click on button2 - by this point, the ':checked' item is already button2.
ev.preventDefault(); // These two lines will stop the radio from actually
ev.stopPropagation(); // changing selection.
// At this point, the ':checked' item is set BACK to button1.
});
因此,最简单的解决方案是在事件处理程序中跟踪闭包中“最后”选择的项,如下所示:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
<script type="text/javascript">
var $last = $('[name=radioButtonGroup]:checked');
// Select the radio buttons as a group.
var $radios = $('[name=radioButtonGroup]').bind('change', function (ev) {
// Click event handler
var $clicked = $(ev.target); // This is the radio that just got clicked.
$last.trigger('unclick'); // Fire the "unclick" event on the Last radio.
$last = $('[name=radioButtonGroup]:checked'); // Update the $last item.
// Should see the clicked item's "Value" property.
console.log("Clicked " + $clicked.attr('value'), $clicked, ev);
}).bind('unclick', function (ev) {
// Handler for our new "unclick" event.
// - fires whenever a radio loses focus.
var $unclicked = $(ev.target); // The radio losing it's checked status.
// Should see the unclicked item's "Value" property.
console.log("Unclicked " + $unclicked.attr('value'), $unclicked, ev);
});
</script>
有关工作示例,请参见:
单选按钮集的简单性质是一次只能选择一个按钮。 自动选择一个按钮意味着未选择其他按钮,但是没有用于取消选择的特定操作。 因此,您只需要担心一个事件,因为它一次影响一组中的所有按钮。
如果您想使用允许多个选择的元素,请尝试复选框。
我无法确认是否仅对选定按钮触发了事件,但是如果您需要对刚刚取消选择的按钮进行操作,则可以使用以下方法:
$(document).ready(function(){
var selectedRadio = null;
$("input:radio").change(function(){
if(selectedRadio != null){
alert(selectedRadio.val());
}
selectedRadio = $(this);
});
});
在这里行动。
如果需要跟踪多组单选按钮,则可以使用当前选定按钮的数组来完成,并在检测到更改时在该数组中进行匹配。
如果使用的是jQuery
,则可以绑定并触发一个自定义事件,我们将其deselect
。
使用下面的代码,我们定义deselect
事件。
$(document).ready(function(){
var selectedRadioList = {};
$('input:radio:checked').each(function(){
selectedRadioList[this.name] = this;
});
$('input:radio').click(function(){
if(selectedRadioList[this.name])
$(selectedRadioList[this.name]).trigger('deselect');
selectedRadioList[this.name] = this;
});
});
现在我们可以绑定以deselect
我们需要的每个位置。
$(document).ready(function(){
$('input:radio').on('deselect', function(){
alert('radio `' + this.value + '` has been deselected');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.