如何让输入类型控制台记录复选框的内容答案

【问题标题】：How do I let the input types console log what the checked boxes如何让输入类型控制台记录复选框的内容
【发布时间】：2020-10-09 14:33:18
【问题描述】：

我想让检查过的控制台记录所有的值，但它只显示一个检查过的输入

我希望控制台日志只显示选中了哪个单选的值，但它会自动显示第一个复选框的值

这是一个小提琴链接https://jsfiddle.net/Nancy4321/hjL3t5qd/

function newForm() {
  var prof = document.querySelector('input[type=radio][name=group2]').value
  var edu_level = document.querySelector('input[type=checkbox][name=group1]').value;
  var pro_other = document.getElementById('pro_other').value;

  var data = {
    "prof": prof,
    "edu_level": edu_level,
    "pro_other": pro_other,
  }
  console.log(data);
}

<body>
  <form>
    <div class="card hoverable">
      <div class="card-content" id="prof">
        <p>Where do you want to go?</p>
        <p>
          <label>
            <input value="Gym" type="checkbox" name="group1" />
            <span>Gym</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Temple" type="checkbox" name="group1" />
            <span>Temple</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Mars" type="checkbox" name="group1" />
            <span>Mars</span>
          </label>
        </p>
        <p>
          <label>
            <input value="space" type="checkbox" name="group1" />
            <span>Space</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Home" type="checkbox" name="group1" />
            <span>Home</span>
          </label>
        </p>

        <p>
          <label>
            <input value="Cali" type="checkbox" name="group1" />
            <span>Cali</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Tulsa" type="checkbox" name="group1" />
            <span>Tulsa</span>
          </label>
        </p>
        <p>
          <label>
            <input value="specify" type="checkbox" name="group1" />
            <span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
          </label>
        </p>
      </div>
    </div>

    <div class="card hoverable">
      <div class="card-content" id="edu_level">
        <p>Highest Level of Education </p>
        <p>
          <label>
            <input value="Tertiary" class="with-gap" name="group2" type="radio" />
            <span>Tertiary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Secondary" class="with-gap" name="group2" type="radio" />
            <span>Secondary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
            <span>Junior Secondary</span>
          </label>
        </p>
      </div>
    </div>

    <div>
      <button type="submit" name="action" onclick="newForm()">Submit
      </button>
    </div>
  </form>
</body>

【问题讨论】：

document.querySelector('input[type=radio][name=group2]:checked').value

标签： javascript html forms input checkbox

【解决方案1】：

您的问题是document.querySelector 只选择第一个元素。要做你想做的事，你需要使用document.querySelectorAll 选择所有输入，并通过循环获取它们的值。

或使用document.querySelector('input[type=radio][name=group2]:checked') 仅选择页面上选中的输入。您可以阅读更多关于 :checked here.

【讨论】：

【解决方案2】：

试试看 - 你需要迭代复选框

在这里我得到检查元素的值

注意我给了表单一个 ID 并删除了内联按钮点击

document.getElementById("newform").addEventListener("submit",function(e) {
  e.preventDefault(); // remove when tested

  const prof = [...document.querySelectorAll('input[type=radio][name=group2]:checked')].map(elem => elem.value)
  const edu_level = document.querySelector('input[type=checkbox][name=group1]:checked').value;
  const pro_other = document.getElementById('pro_other').value;

  var data = {
    "prof": prof,
    "edu_level": edu_level,
    "pro_other": pro_other
  }
  console.log(data);
  
})

<body>
  <form id="newform">
    <div class="card hoverable">
      <div class="card-content" id="prof">
        <p>Where do you want to go?</p>
        <p>
          <label>
            <input value="Gym" type="checkbox" name="group1" />
            <span>Gym</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Temple" type="checkbox" name="group1" />
            <span>Temple</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Mars" type="checkbox" name="group1" />
            <span>Mars</span>
          </label>
        </p>
        <p>
          <label>
            <input value="space" type="checkbox" name="group1" />
            <span>Space</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Home" type="checkbox" name="group1" />
            <span>Home</span>
          </label>
        </p>

        <p>
          <label>
            <input value="Cali" type="checkbox" name="group1" />
            <span>Cali</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Tulsa" type="checkbox" name="group1" />
            <span>Tulsa</span>
          </label>
        </p>
        <p>
          <label>
            <input value="specify" type="checkbox" name="group1" />
            <span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
          </label>
        </p>
      </div>
    </div>

    <div class="card hoverable">
      <div class="card-content" id="edu_level">
        <p>Highest Level of Education </p>
        <p>
          <label>
            <input value="Tertiary" class="with-gap" name="group2" type="radio" />
            <span>Tertiary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Secondary" class="with-gap" name="group2" type="radio" />
            <span>Secondary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
            <span>Junior Secondary</span>
          </label>
        </p>
      </div>
    </div>

    <div>
      <button type="submit" name="action">Submit
      </button>
    </div>
  </form>
</body>

【讨论】：