Question

我是Javascript的新手，因此我不确定我的代码是否正常工作，因为我不确定如何测试或运行它。我希望我的代码要做的是显示通过收集所有选中的框创建的JSON。我还没有在任何地方添加console.log，因为我不确定哪个地方合适。我觉得好像我有所有的碎片，但我不知道如何把所有东西放在一起。

预期输出应为：

{
  "testpages" : [...data...],
  "configs" : [...data...]
}

我的代码

<script type="text/javascript">
  function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementByClassName('.testpages').value;
    var selectedTestPages = document.getElementByClassName('.configs').value;
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i])
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i])
      }
    }
    var jsonString = {"testpages" : testpages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div class="testpages" id="left_col">
        <input id="tp1" type="checkbox" value="1">Test Page 1<br>
        ...
        ...
        <input id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div class="configs" id="right_col">
        <input id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 
        ...
        ...
        <input id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>

Answer 1

原始代码中发现的一些（微不足道的）错误：

使用getElementByClassName而不是getElementsByClassName
在jsonString形成中使用的testpages代替testPages
使用classnames testpages和configs代替父div 输入元素。

这是您可以使用的那个：

    <html>
    <script type="text/javascript">
    function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementsByClassName('testpages');
    var selectedTestPages = document.getElementsByClassName('configs');
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i].value)
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i].value)
      }
    }
    var jsonString = {"testpages" : testPages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div id="left_col">
        <input class="testpages" id="tp1" type="checkbox" value="1">Test Page 1<br>
        <input class="testpages" id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div id="right_col">
        <input class="configs" id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 

        <input class="configs" id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>

Answer 2

我认为问题在于您尝试返回类的值而不是检查是否已检查。而不是getElementByClassName（）。值，请尝试getElementByClassName（id）.getElementsByTag（'input'）。这将返回一个数组，您可以循环并返回值。

答案格式的道歉，从SO应用程序输入。

点击按钮运行Javascript

2 个答案: