Question

我有一个表单，其中有更多复选框，我想知道是否有一个脚本来获取未选中的复选框的值，并在按下确认按钮时将值放在Java或其他形式的数组上< / p>

我不知道如何使用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

使用代码的简化版，您可以使用以下方法实现：

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>

Answer 2

您可以使用类似的东西：

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>

使用Javascript方法获取未选中复选框的值html页面

2 个答案: