如何获取各种复选框的值

Question

我已经创建了多个具有不同名称的复选框，如代码片段所示，并希望获得每个复选框的值，即，如果用户单击复选框，则存储值1，如果没有单击，则存储值0，但我仍然只获得所有复选框的值0。无论我是否点击它，它似乎都没有显示出来。我尝试了在网上和这个平台上看到的各种答案，但都没有效果。

我的代码片段是：

          <div class="col-xs-6 col-sm-4 border-pdf-td">
        <div class="checkbox">
          <label for="telecommunication">
            <input name="telecommunication" type="hidden" value="0" />
            <input type="checkbox" value="1" name="telecommunication" />
            Telecommunication
          </label>
        </div>
      </div>
      <div class="col-xs-6 col-sm-5 border-pdf-td">
        <div class="checkbox">
          <label for="grocery">
            <input name="grocery" type="hidden" value="0" />
            <input type="checkbox" value="1" name="grocery" />
            Grocery and Supermarkets
          </label>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 border-pdf-d">
        <div class="checkbox">
          <label for="petroleum">
            <input name="petroleum" type="hidden" value="0" />
            <input type="checkbox" value="1" name="petroleum" />
            Petroleum
          </label>
        </div>
      </div>
        <div class="col-xs-12 col-sm-4 border-pdf-d">
          <div class="checkbox">
            <label for="ecommerce">
              <input name="ecommerce" type="hidden" value="0" />
              <input type="checkbox" value="1" name="ecommerce" />
              E-Commerce
            </label>
          </div>
        </div>
      <div class="col-xs-12 col-sm-5 border-pdf-d">
        <div class="checkbox">
          <label for="mailorder">
            <input name="mailorder" type="hidden" value="0" />
            <input type="checkbox" value="1" name="mailorder" />
            Mail order/telephone order (MOTO)
          </label>
        </div>
      </div>

用于获取这些值的JavaScript代码的当前状态为

  var telecommunication = document.getElementsByName("telecommunication")[0].value;
  var grocery = document.getElementsByName("grocery")[0].value;
  var petroleum = document.getElementsByName("petroleum")[0].value;
  var ecommerce = document.getElementsByName("ecommerce")[0].value;
  var mailorder = document.getElementsByName("mailorder")[0].value;

我之前尝试过下面的代码，但总是得到相同的结果。

var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;

请注意，我在相同的表单上有这些复选框和更多的复选框，以便通过它们的唯一名称来获取它们的值。

Answer 1

我觉得你不需要这个

<input name="telecommunication" type="hidden" value="0" />

所以抓住它的价值

var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;

Answer 2

我认为您在表单中使用了一种糟糕的设计模式。如果你想发送一个1或者0，那么你应该使用单选按钮而不是复选框。复选框(和单选按钮)被设计为仅在选中时才包含在请求中。

您可以使用FormData对象从表单中获取所有值。

​

const form = document.querySelector('form');

form.addEventListener('change', event => {
  const formData = new FormData(form);
  for (const [ name, value ] of formData) {
    console.log(`${name}:`, value);
  }
});

.as-console-wrapper {
  max-height: 100px !important;
}

<form>

  <div class="form-group">
    <h4>Telecommunication</h4>
    <label>
      Yes
      <input type="radio" value="1" name="telecommunication" checked />
    </label>
    <label>
      No
      <input type="radio" value="0" name="telecommunication" />
    </label>
  </div>
  
  <div class="form-group">
    <h4>Grocery and Supermarkets</h4>
    <label>
      Yes
      <input type="radio" value="1" name="grocery" checked />
    </label>
    <label>
      No
      <input type="radio" value="0" name="grocery" />
    </label>
  </div>
  
  <div class="form-group">
    <h4>Petroleum</h4>
    <label>
      Yes
      <input type="radio" value="1" name="petroleum" checked />
    </label>
    <label>
      No
      <input type="radio" value="0" name="petroleum" />
    </label>
  </div>
  
  <div class="form-group">
    <h4>E-Commerce</h4>
    <label>
      Yes
      <input type="radio" value="1" name="ecommerce" checked />
    </label>
    <label>
      No
      <input type="radio" value="0" name="ecommerce" />
    </label>
  </div>
  
  <div class="form-group">
    <h4>Mail order/telephone order (MOTO)</h4>
    <label>
      Yes
      <input type="radio" value="1" name="mailorder" checked />
    </label>
    <label>
      No
      <input type="radio" value="0" name="mailorder" />
    </label>
  </div>
  
</form>

​