document.querySelectorAll('') 它是如何工作的？

Question

我想要一些关于 JS querySelectorAll('') 的提示。我需要计算一些复选框来建立最大的选择。问题是我不想将它们全部计算在内，只计算带有“name=homeCheck”的那些，并且在我使用 querySelectorAll 的方式中它不能正常工作：function insertDeleteNews(data) {if (checked == true && document.querySelectorAll('input[type="checkbox"]:checked').length > 6){...}} <td><input type="checkbox" name="homeCheck" id="homeCheck_<?=$row['id']."_".$row['id_azienda']?>" value="<?=$row['id']."_".$row['id_azienda']?>" <?= $rowHome ?"checked":""?> <?= !$rowNews ?"disabled":""?> onclick="insertDeleteNews(this.value)"></td>

Answer 1

您可以查询 name-property 而不是 type-property：

input[name="name1"]:checked

一般示例：

let button = document.getElementById('button');

button.addEventListener('click', function(event) {

  event.preventDefault();

  let count = document.querySelectorAll('input[name="name1"]:checked').length;

  console.log(count);

});

<input type="checkbox" name="name1"> Name1 (1)<br>

<input type="checkbox" name="name2"> Name2 (1)<br>

<input type="checkbox" name="name1"> Name1 (2)<br>

<input type="checkbox" name="name2"> Name2 (2)<br>

<input type="checkbox" name="name1"> Name1 (3)<br>

<button id="button">Count Name1</button>

示例 - 检查最多 3 个：

let checkboxes = document.querySelectorAll('input[name="homeCheck"]');

for (let checkbox of checkboxes) {

  checkbox.addEventListener('click', checkboxLimitTo3Checked);

}

function checkboxLimitTo3Checked(event) {

  let checked = document.querySelectorAll('input[name="homeCheck"]:checked').length;

  if (checked > 3) {

    event.preventDefault();

  }

}

<input type="checkbox" name="homeCheck"> homeCheck 1<br>

<input type="checkbox" name="homeCheck"> homeCheck 2<br>

<input type="checkbox" name="homeCheck"> homeCheck 3<br>

<input type="checkbox" name="homeCheck"> homeCheck 4<br>

<input type="checkbox" name="homeCheck"> homeCheck 5<br>

Answer 2

您可以通过以下方式替换您的功能

function insertDeleteNews(data) {

    if (document.querySelectorAll('input[name="homeCheck"]:checked').length > 6){

...}

}

这将找到所有名称为“homeCheck”的检查输入