获取未选中复选框html页面值的Javascript方法[重复]

Question

我有一个表单，其中有更多复选框，我想知道是否有脚本可以获取未选中的复选框的值，并在按下确认按钮时将值放在 java 中的数组或其他东西上

不知道jquery怎么用

<table class="scroll">
  <thead>
    <tr>
      <th>Nome Servizio</th>
      <th>Descrizione</th>
      <th>Autorizza</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>searchZona</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#1></td>
    </tr>
    <tr>
      <td>showUserServicesPanel</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#2></td>
    </tr>
    <tr>
      <td>searchStructureAgent</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#3></td>
    </tr>
    <tr>
      <td>searchCostruttore</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#4></td>
    </tr>
    <tr>
      <td>getStructureAgent</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#5></td>
    </tr>
    <tr>
      <td>getSottoGruppo</td>
      <td></td>
      <td><input type="checkbox" name="check" value=2#6></td>
    </tr>

Answer 1

你可以使用类似的东西：

const formEl = document.getElementById('myForm');
formEl.addEventListener('submit', (event) => {

  const inputs = formEl.getElementsByTagName('input');
  const uncheckedCheckboxesValue = []
  for(let i = 0, iEnd = inputs.length; i < iEnd; i++) {
    const input = inputs[i];
    
    if(input.getAttribute('type') === 'checkbox' && !input.checked) {
      uncheckedCheckboxesValue.push(input.value);
    }
  }
  
  if(uncheckedCheckboxesValue.length > 0) {
      event.preventDefault(); // Prevent send the form
      console.log(uncheckedCheckboxesValue);
  }

}, false);;

#myForm label {
  display: block;
}

<form id="myForm">

<label>A: <input type="checkbox" value="Aval" /></label>
<label>B: <input type="checkbox" value="Bval" /><br /></label>
<label>C: <input type="checkbox" value="Cval" /><br /></label>
<label>D: <input type="checkbox" value="Dval" /><br /></label>
<label>E: <input type="checkbox" value="Eval" /><br /></label>

<input type="submit" id="myFormSubmit" />

</form>

Answer 2

使用您的代码的简化版本，您可以通过以下方式实现：

document.querySelectorAll('[type="checkbox"]:not(:checked)')

这将为您提供尚未检查的输入元素的 HTML 集合。

然后，您可以使用 .map 和 destructuring assignment（可选）将元素数组转换为每个元素的值数组。

请参阅下面的工作示例（缩小版）：

当您单击按钮时获取所有复选框项目，然后

const createArray = _ => {
  let foods = [...document.querySelectorAll('[type="checkbox"]:not(:checked)')];
  foods = foods.map(({value:v}) => v);
  console.log(foods);
}

input {
  display: block;
}

<input type="checkbox" value="apple" />
<input type="checkbox" value="carrot" />
<input type="checkbox" value="tomato" />
<input type="checkbox" value="potato" />
<br />
<button onclick="createArray()">Create array</button>