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

您可以查询名称属性而不是类型属性：

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”的所有已检查输入

document.querySelectorAll（''）如何运作？

2 个答案: