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>

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

jQuery get checkboxes either checked or have a specific data

checkbox

jquery

dictionary

filter

selector