单选按钮组 - 更改按钮的事件会被取消选中?
比方说,我有一组的两个单选按钮:单选按钮组 - 更改按钮的事件会被取消选中?
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
看来,单击第二个按钮触发该按钮只有事件处理程序。但是,第一个按钮确实被取消选择,并且视觉上确实发生了变化。任何人都可以验证事件被触发只有在被选中的按钮上,而不是由于点击而被取消选择的组中的任何其他按钮?任何聪明的方式来观看取消选择事件的单选按钮?
我无法证实事件仅触发所选按钮的,但如果你需要做的是刚刚取消按钮的东西,下面的工作:
$(document).ready(function(){
var selectedRadio = null;
$("input:radio").change(function(){
if(selectedRadio != null){
alert(selectedRadio.val());
}
selectedRadio = $(this);
});
});
在行动here 。
如果您需要跟踪多组单选按钮,您可以使用当前选定按钮的数组执行此操作,并在检测到更改时在该数组内匹配。
感谢帕特。我可能会在JS中建立我自己的无线电组别reprentation,它可以工作,但不能像每个按钮的事件处理程序那样漂亮。 – morgancodes 2010-07-26 20:54:31
尽管无法确认,但事件更改触发器不会发生在整个组上。
如果你想这样的事情发生,你可以使用像jQuery,YUI等,甚至普通的JavaScript各种JS库做到这一点,如下所示:
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>
对于工作例如,参见:
的SIMPL单选按钮组的性质是一次只能选择一个按钮。自动选择一个按钮意味着其他选项未被选中,但没有特定的取消选择操作。因此,您只需要担心一个事件,因为它一次会影响集合中的所有按钮。
如果您想使用允许多选的元素,请尝试复选框。
如果您使用的是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');
});
});
请选择一个正确的答案,或指定你需要什么进一步的信息来解决你的问题。 – 2012-09-07 17:18:02