Question

请考虑以下示例代码：

<div class="containter" id="ControlGroupDiv">
  <input onbeforeupdate="alert('bingo 0'); return false;" onclick="alert('click 0');return false;" id="Radio1" type="radio" value="0" name="test" checked="checked" />  
  <input onbeforeupdate="alert('bingo 1'); return false;" onclick="alert('click 1');return false;"  id="Radio2" type="radio" value="1" name="test" />   
  <input onbeforeupdate="alert('bingo 2'); return false;" onclick="alert('click 2');return false;"  id="Radio3" type="radio" value="2" name="test" />   
  <input onbeforeupdate="alert('bingo 3'); return false;" onclick="alert('click 3');return false;"  id="Radio4" type="radio" value="3" name="test" />   
  <input onbeforeupdate="alert('bingo 4'); return false;" onclick="alert('click 4');return false;"  id="Radio5" type="radio" value="4" name="test" />   
  <input onbeforeupdate="alert('bingo 5'); return false;" onclick="alert('click 5');return false;"  id="Radio6" type="radio" value="5" name="test" />   
</div>

在FireFox 2和3上，将return false放在单选按钮的单击事件上会阻止它的值以及组中所有其他单选按钮的更改。这有效地使其成为只读而不会禁用它并将其变为灰色。

在Internet Explorer上，如果选中了另一个单选按钮，并且您单击该组中的另一个单选按钮，则在单击事件触发您单击的单击事件之前，已选中的单选按钮将清除。但是，由于click事件上的“return false”，您单击的那个没有被选中。

According to MSDN，{click {3}}事件在click事件触发之前触发控件组中的所有控件，我认为这是另一个单选按钮被清除的位置。但是，如果您尝试上面的代码，onbeforeupdate事件中不会显示任何警报 - 您只需获得点击事件警报。显然，事件永远不会被解雇，或者没有办法陷阱。

是否有任何可以捕获的事件可以阻止群组中的其他单选按钮清除？

请注意，这是一个简化的示例，我们实际上使用jQuery来设置事件处理程序并处理它。

更新：

如果您将此事件添加到其中一个单选按钮：

onmousedown="alert('omd'); return false;"

弹出警告框，关闭它，点击事件永远不会触发。所以我们认为我们已经弄明白了，但不，它可能不那么容易。如果您删除警报并将其更改为：

onmousedown="return false;"

它不起作用。另一个单选按钮清除，单击按钮上的单击事件将触发。 onbeforeupdate仍然没有发射过。

我们认为这可能是时机（即使它很少是真的，但这一直是理论），所以我尝试了这个：

onmousedown="for (i=0; i<100000; i++) {;}; return false;"

您单击，暂停一段时间，然后另一个单选按钮清除，然后单击事件触发。 Aaargh！

更新

Internet Explorer糟透了。除非有人想出一个好主意，否则我们会放弃这种方法并使用复选框jQuery扩展，它可以实现我们想要的功能，但会给页面带来更大的客户端脚本负担，并且需要更多的HTML重新编码，因为ASP.Net服务器控件呈现和母版页名称修改。

Answer 1

是的，这是一个奇怪的错误。我确实设法做了一个解决方法。我在这里使用了一些Prototype来处理类名。它适用于IE和FF。您可以使用选择器而不是原始循环缩短它。

<form name="f1">
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" checked value="A" name="r1" id="radio1" />
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" value="B" name="r1" id="radio2" />
</form>
<script type="text/javascript">
function recordMe() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if(document.f1.r1[x].checked) {
            $(document.f1.r1[x].id).addClassName('radioChecked')
        }
    }
}
function clickCheck() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if($(document.f1.r1[x].id).hasClassName('radioChecked')) {
            $(document.f1.r1[x].id).checked=true
        }
    }
}
</script>

Answer 2

我也有这个问题。我们目前正在实现jquery，所以我用它来重新检查一个合适的。显然你不需要jquery来设置复选框的属性。

function something(type){//type can be 1 or 0
     if(confirm("You will lose all unsaved changes. Continue?")){
     //Do stuff
          switch(type){
               case 1:
                break;
               case 0;
                break;
                default:
                //nothing;
                 break;
          }//!End of switch 
      }else{//They clicked canel
      //Reset checkboxes in IE
          if(type==1){$('#IDofCheckbox1').attr('checked', true);}
          else{$('#IDofCheckbox2').attr('checked', true);}
      }//!End of if they clicked cancel

Answer 3

你的目标是什么？如果您只想在进行更改时捕获，请在onclick事件上运行逻辑。（这将解决IE在onchange上的错误）

如果您正在尝试更改单选按钮的预期行为 - 我强烈建议不要使用它。

Answer 4

这些方法都不起作用 - 我们最后使用复选框jQuery插件取代了带有可移动图像的复选框和单选按钮。这意味着我们可以控制禁用控件的视图。

PITA，但它确实有效。

Answer 5

您可以将未选中的单选按钮设置为onclick，而不是将return false属性设置为disabled。除了未选中的单选按钮将显示为灰色外，这会产生相同的效果。

你能在Internet Explorer上捕获这些单选按钮事件吗？

5 个答案: