IE、getElementById 和单选按钮

发布于 2024-10-15 20:57:48 字数 939 浏览 5 评论 0原文

一些简单的代码:

<input type="radio" id="knob-reassign-leave" name="knob-reassign" value="n" checked="checked">Leave <br>
<input type="radio" id="knob-reassign-cmp" name="knob-reassign" value="d"> Default <br>
<input type="radio" id="knob-reassign" name="knob-reassign" value="r"> Reassign to

<select name="assigned_to" id="assigned_to" onchange="
  if ((this.value != 'currentuser') && (this.value != '')) {
    var kr = document.getElementById('knob-reassign');
    document.getElementById('knob-reassign').checked=true;
  }">

  <option value="otheruser">Someone Else</option>
  <option value="lastuser">Someone Third</option>
  <option value="currentuser" selected="selected">Me</option>
</select>

这在 FF 和 chrome 中都运行得很好,但正如我在编写代码时经常听到的那样,这在 IE 中不起作用。看来 IE 正在搜索 ID 的“名称”,或者它尝试将 ID 转换为名称,因为它总是选择第一个无线电,而它应该获取最后一个无线电。

Some simple code:

<input type="radio" id="knob-reassign-leave" name="knob-reassign" value="n" checked="checked">Leave <br>
<input type="radio" id="knob-reassign-cmp" name="knob-reassign" value="d"> Default <br>
<input type="radio" id="knob-reassign" name="knob-reassign" value="r"> Reassign to

<select name="assigned_to" id="assigned_to" onchange="
  if ((this.value != 'currentuser') && (this.value != '')) {
    var kr = document.getElementById('knob-reassign');
    document.getElementById('knob-reassign').checked=true;
  }">

  <option value="otheruser">Someone Else</option>
  <option value="lastuser">Someone Third</option>
  <option value="currentuser" selected="selected">Me</option>
</select>

This all works very well in FF and chrome, but as I always hear when I write code, this doesn't work in IE. It appears that IE is searching 'names' for the ID, or it tries to translate the ID into a name, because it always selects the first radio, when it should grab the last.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不疑不惑不回忆 2024-10-22 20:57:48

当名称和 ID 相同时,IE6/7/8 似乎确实选择了第一个 元素。这是一个简单的测试用例:

<input type="radio" id="a" name="c" value="1">
<input type="radio" id="b" name="c" value="2">
<input type="radio" id="c" name="c" value="3">

<script type="text/javascript">
    // Should get 3rd <input> with id 'c' and alert '3'
    // Instead finds 1st input with name 'c' and alerts '1'
    alert(document.getElementById('c').value); 
</script>

虽然我无法提供解释(Google 有大量相关结果),我可以提供修复: 覆盖 IE 的 getElementById 实现 或更改最后一个元素的 ID与名称不同:

<input type="radio" id="knob-reassign-leave" name="knob-reassign" value="n" checked="checked">Leave <br>
<input type="radio" id="knob-reassign-cmp" name="knob-reassign" value="d"> Default <br>
<input type="radio" id="knob-reassign-reassign" name="knob-reassign" value="r"> Reassign to

<select name="assigned_to" id="assigned_to" onchange="
  if ((this.value != 'currentuser') && (this.value != '')) {
    document.getElementById('knob-reassign-reassign').checked=true;
  }">

  <option value="otheruser">Someone Else</option>
  <option value="lastuser">Someone Third</option>
  <option value="currentuser" selected="selected">Me</option>
</select>

IE6/7/8 do indeed seem to select the first <input> element when the name and ID are the same. Here is a simple test case:

<input type="radio" id="a" name="c" value="1">
<input type="radio" id="b" name="c" value="2">
<input type="radio" id="c" name="c" value="3">

<script type="text/javascript">
    // Should get 3rd <input> with id 'c' and alert '3'
    // Instead finds 1st input with name 'c' and alerts '1'
    alert(document.getElementById('c').value); 
</script>

While I can't offer an explanation (Google has tons of relevant results), I can offer a fix: Either override IE's implementation of getElementById or change the ID of the last element to be different from the name:

<input type="radio" id="knob-reassign-leave" name="knob-reassign" value="n" checked="checked">Leave <br>
<input type="radio" id="knob-reassign-cmp" name="knob-reassign" value="d"> Default <br>
<input type="radio" id="knob-reassign-reassign" name="knob-reassign" value="r"> Reassign to

<select name="assigned_to" id="assigned_to" onchange="
  if ((this.value != 'currentuser') && (this.value != '')) {
    document.getElementById('knob-reassign-reassign').checked=true;
  }">

  <option value="otheruser">Someone Else</option>
  <option value="lastuser">Someone Third</option>
  <option value="currentuser" selected="selected">Me</option>
</select>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文