Question

我们有古老的代码，可以从数据库中动态创建HTML表单数据，并且编写了引用document.all来获取一组非唯一的Id复选框。我需要找到最少变化的方法＆＃34;使代码以符合标准的方式运行。我的问题是将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，但边缘模式下的IE 11除外，因为代码使用document.all('ck_2630')来获取数组。 Edge摆脱了document.all（语句if (document.all)返回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，除非预期结果会返回多个匹配，然后您需要使用Name属性，并使用document.getElementsByName。这是我们一直在使用的解决方案，到目前为止，它的工作非常出色。在document.<formName>遇到任何问题的地方，我们采用了相同的解决方案。

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

1 个答案: