jQuery获取复选框或选中或具有特定数据

Question

我有一个包含许多复选框的表单，其中一些具有特定的数据属性（例如data-myname）。现在，单击按钮时，我需要获取checked 或具有data-myname 属性（选中与否）的复选框集合并在$.each(filteredCollection, function(){.....}) 中使用。

我研究过使用 .map 和 .filter，但由于我对这些函数的了解有限，我无法获得要使用的正确条件序列。

任何帮助将不胜感激。

Answer 1

您可以使用querySelectorAll 和... 扩展运算符来获取多个条件。

let el = [...document.querySelectorAll("[type=checkbox]:checked"), ...document.querySelectorAll("[type=checkbox][data-myname]")]

console.log(el)

el.forEach(e => e.nextElementSibling.style.color="red")

<input type="checkbox" id="1"  value="Bike" data-myname="">
<label for="vehicle1"> 1</label><br>
<input type="checkbox" id="2" value="Car" >
<label for="vehicle2"> 2</label><br>
<input type="checkbox" id="3"  value="Boat" checked>
<label for="vehicle3"> 3</label><br> 
<input type="checkbox" id="3"  value="Boat" data-myname="">
<label for="vehicle3"> 4</label><br> 
<input type="checkbox" id="3"  value="Boat">
<label for="vehicle3"> 5</label><br>

如果你想使用filter:

let el = [...document.querySelectorAll("[type=checkbox]")].filter( (e) => {
  if (e.checked || e.hasAttribute("data-myname")) {
    return e
  }
}) 

console.log(el)

el.forEach(e => e.nextElementSibling.style.color="red")

<input type="checkbox" id="1" value="Bike" data-myname="">
<label for="vehicle1"> 1</label><br>
<input type="checkbox" id="2" value="Car">
<label for="vehicle2"> 2</label><br>
<input type="checkbox" id="3" value="Boat" checked>
<label for="vehicle3"> 3</label><br>
<input type="checkbox" id="3" value="Boat"  data-myname="">
<label for="vehicle3"> 4</label><br>
<input type="checkbox" id="3" value="Boat">
<label for="vehicle3"> 5</label><br>