document.all 替换的符合标准的代码

Question

我们有从数据库中动态创建 HTML 表单数据的古老代码，并且编写了引用 document.all 来获取一组非唯一 ID 复选框。我需要找到 "method of fewest changes" 以使代码以符合标准的方式运行。我的问题是关于将 document.myForm 和 document.all 调用替换为产生相同但符合标准的东西。

<form name="myForm">
....
    <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[0]);" type="checkbox" value="139"><span onclick="document.myForm.ck_2630[0].checked = !document.myForm.ck_2630[0].checked;click(document.myForm.ck_2630[0]);">Ankle, Left</span><br/>
    <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[1]);" type="checkbox" value="140"><span onclick="document.myForm.ck_2630[1].checked = !document.myForm.ck_2630[1].checked;click(document.myForm.ck_2630[1]);">Ankle, Right</span><br/>
    <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[2]);" type="checkbox" value="141"><span onclick="document.myForm.ck_2630[2].checked = !document.myForm.ck_2630[2].checked;click(document.myForm.ck_2630[2]);">Arm, Left</span><br/>
    <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[3]);" type="checkbox" value="142"><span onclick="document.myForm.ck_2630[3].checked = !document.myForm.ck_2630[3].checked;click(document.myForm.ck_2630[3]);">Arm, Right</span><br/>
...
</form>

<script>
....
function getElem_Opener(strElementName) {
    return document.all(strElementName);
}
....
</script>

该代码适用于所有版本的 IE，但 Edge 模式下的 IE 11 除外，因为该代码使用 document.all('ck_2630') 来获取数组。 Edge 去掉了 document.all（语句 if (document.all) returns false），但我不知道它是否也去掉了 document.<form name>.<element name/id> 结构，它似乎处理了它与 document.all 相同的字段。

<form name="myForm" method="post">
  <button onclick="checkElement('139'); return false;">Select Left Ankle</button><br/>
  <button onclick="checkElement('140'); return false;">Select Right Ankle</button><br/>
  <button onclick="checkElement('141'); return false;">Select Left Arm</button><br/>
  <button onclick="checkElement('142'); return false;">Select Right Arm</button><br/>

  <table name="tbl2630">
    <tr id="rw_2630_139" style="display:none"><td>
      <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[0]);" type="checkbox" value="139"><span onclick="document.myForm.ck_2630[0].checked = !document.myForm.ck_2630[0].checked;click(document.myForm.ck_2630[0]);">Ankle, Left</span>
    </td></tr>
    <tr id="rw_2630_140" style="display:none"><td>
        <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[1]);" type="checkbox" value="140"><span onclick="document.myForm.ck_2630[1].checked = !document.myForm.ck_2630[1].checked;click(document.myForm.ck_2630[1]);">Ankle, Right</span>
        </td></tr>
    <tr id="rw_2630_141" style="display:none"><td>
        <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[2]);" type="checkbox" value="141"><span onclick="document.myForm.ck_2630[2].checked = !document.myForm.ck_2630[2].checked;click(document.myForm.ck_2630[2]);">Arm, Left</span>
    </td></tr>
    <tr id="rw_2630_142" style="display:none"><td>
        <input name="2630" id="ck_2630" onclick="click(document.myForm.ck_2630[3]);" type="checkbox" value="142"><span onclick="document.myForm.ck_2630[3].checked = !document.myForm.ck_2630[3].checked;click(document.myForm.ck_2630[3]);">Arm, Right</span>
    </td></tr>
  </table> 

  <script>
function click(ck) {
    alert("selected item " + ck.name + ", value " + ck.value);
}

function getElem_Opener(strElementName) {
    return document.all(strElementName);
}

function checkElement(intAltID){
  var boolValid = false, boolIsCheckbox = false;
  var strItemID = "2630";
  var elem = getElem_Opener('ck_' + strItemID);
  var elemRow = null, elemUncheck = null, elemTable;

  boolIsCheckbox = true;

  if (elem.length) {                
    for (var i = 0; i < elem.length; i++) { 
      if (elem[i].value == intAltID) {
        elem[i].checked = true;
        boolValid = true;
        elemRow = getElem_Opener('rw_' + strItemID + '_' + intAltID);
        break;                      
        }
      }
    } 

  if (boolValid) {
    if (elemRow != null) {
      elemRow.style.display = 'inline';                 
    }       
  }    
}</script>
</form>

Answer 1

在我的所有研究中，我发现 document.all 的最佳替代品是 document.getElementById，除非预期结果为 return 多次点击，然后您需要使用它的 Name 属性，并使用 document.getElementsByName。这是我们一直在使用的解决方案，到目前为止效果非常好。在document.<formName>遇到问题的地方，我们采用了相同的解决方案。

document.all 替换的符合标准的代码

Standards compliant code for document.all replacement

javascript

html

web-standards