Javascript getElementsByTagName("input").value 不返回结果

Question

我们有一个页面，其中包含基于进程选择动态列出的进程和匹配的子进程。进程可以有多个选择。将根据进程选择加载子进程。

这里我需要验证每个流程最多只需要选择一个子流程。

我正在尝试通过以下验证来实现这一目标。尝试使用InnerText 和InnerHtml 未获得checkboxProcess[i].value() 的值

function Validate() {
  var atLeast = 1;
  var CHKcblProcess = document.getElementById("cblProcess");
  var checkboxProcess = CHKcblProcess.getElementsByTagName("input");
  //var listOfSpans = checkboxProcess.getElementsByTagName('span');
  var counter = 0;
  var subcounter = 0;
  for (var i = 0; i < checkboxProcess.length; i++) {

    if (checkboxProcess[i].checked) {
      counter++;
    }
  }
  if (atLeast > counter) {
    alert("Please select atleast " + atLeast + " Process item(s)");
    return false;
  } else {
    var CHKcblSubProcess = document.getElementById("cblSubDept");
    var checkboxSubProcess = CHKcblSubProcess.getElementsByTagName("input");
    var subcounter = 0;
    for (var i = 0; i < checkboxProcess.length; i++) {
      if (checkboxProcess[i].checked) {
        alert(checkboxProcess[i].innerText);
        counter++;
      }
    }
    /*for (var i = 0; i < checkboxProcess.length; i++) {
        if (checkboxProcess[i].checked) {
          alert(checkboxProcess[i].value());
          counter++;
          for (var i = 0; i < checkboxSubProcess.length; i++) {
            if (checkboxSubProcess[i].checked) {
              subcounter++;


            }
          }
        }
      }*/

    return true;
  }
}

<table id="cblProcess" border="0" style="font-size:X-Small;">
  <tr>
    <td><input id="cblProcess_0" type="checkbox" name="cblProcess$0" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$0\',\'\')', 0)" /><label for="cblProcess_0">Additive Manufacturing</label></td>
    <td><input id="cblProcess_1" type="checkbox" name="cblProcess$1" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$1\',\'\')', 0)" /><label for="cblProcess_1">Assembly</label></td>
    <td><input id="cblProcess_2" type="checkbox" name="cblProcess$2" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$2\',\'\')', 0)" /><label for="cblProcess_2">Component M/C</label></td>
    <td><input id="cblProcess_3" type="checkbox" name="cblProcess$3" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$3\',\'\')', 0)" /><label for="cblProcess_3">Compounding Extrusion Finishing</label></td>
  </tr>
  <tr>
    <td><input id="cblProcess_4" type="checkbox" name="cblProcess$4" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$4\',\'\')', 0)" /><label for="cblProcess_4">Custom Tool M/C</label></td>
    <td><input id="cblProcess_5" type="checkbox" name="cblProcess$5" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$5\',\'\')', 0)" /><label for="cblProcess_5">Digital Factory</label></td>
    <td><input id="cblProcess_6" type="checkbox" name="cblProcess$6" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$6\',\'\')', 0)" /><label for="cblProcess_6">Energy</label></td>
    <td><input id="cblProcess_7" type="checkbox" name="cblProcess$7" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$7\',\'\')', 0)" /><label for="cblProcess_7">Molding</label></td>
  </tr>
  <tr>
    <td><input id="cblProcess_8" type="checkbox" name="cblProcess$8" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$8\',\'\')', 0)" /><label for="cblProcess_8">Plating</label></td>
    <td><input id="cblProcess_9" type="checkbox" name="cblProcess$9" onclick="javascript:setTimeout('__doPostBack(\'cblProcess$9\',\'\')', 0)" /><label for="cblProcess_9">Stamping</label></td>
    <td></td>
    <td></td>
  </tr>
</table>

<table id="cblSubDept" border="0" style="font-size:X-Small;">
  <tr>
    <td><input id="cblSubDept_0" type="checkbox" name="cblSubDept$0" /><label for="cblSubDept_0">[Assembly] - Connector Assembly</label></td>
    <td><input id="cblSubDept_1" type="checkbox" name="cblSubDept$1" /><label for="cblSubDept_1">[Assembly] - PSP</label></td>
    <td><input id="cblSubDept_2" type="checkbox" name="cblSubDept$2" /><label for="cblSubDept_2">[No Sub-Dept]</label></td>
  </tr>
</table>

<input type="submit" name="btnInquiry" value="Submit" onclick="return Validate(); id=" btnInquiry " class="NavButton-medium " />

Answer 1

你可以使用 getElementsByTagName("input")[0].value; 而不是 getElementsByTagName("input");

例如 试试看

<input type="text"/>

<button onclick="myFunction()">Try it</button>


<script>
function myFunction() {
                       alert(document.getElementsByTagName("input")[0].value);
                       }
</script>