通过匹配数组检索值

Question

选中复选框的值与数组交叉匹配以过滤结果。如何选择price和lot值？

var inputElements = document.getElementsByName("fruits"); 

const item = [

{"lychee":{ price:10, lot:8}}, 

{"orange" :{ price:12, lot:6}},

{"apple" :{ price:8, lot:3}},

{"mango"  :{ price:12, lot:5}},

{"banana" :{ price:4, lot:1}}];

    

var checked = [...inputElements].map(item => { 

  if(item.checked){ 

    return item.value

   }

}).filter(item => item);

console.log(checked);

 <input type="checkbox" name="fruits" value="lychee" checked>

 <input type="checkbox" name="fruits" value="orange">

Answer 1

具有正确选择器的QuerySelectorAll将为您提供检查的值：注意我从对象数组更改为普通对象const item = {&nbsp;&nbsp; "lychee": {"price": 10,"lot": 8},&nbsp; "orange": {"price": 12,"lot": 6},&nbsp; "apple":&nbsp; {"price": 8, "lot": 3},&nbsp; "mango":&nbsp; {"price": 12,"lot": 5},&nbsp; "banana": {"price": 4, "lot": 1}};let res = [...document.querySelectorAll("[name=fruits]:checked")]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.map(chk => `${chk.value},lot:${item[chk.value].lot}, price:${item[chk.value].price}`);document.getElementById("res").innerHTML = res.join("<br/>");<input type="checkbox" name="fruits" value="lychee" checked> lychee <br /><input type="checkbox" name="fruits" value="orange"> orange <br /><input type="checkbox" name="fruits" value="banana" checked> banana <br /><br/><span id="res"></span>

Answer 2

您可以使用document.querySelectorAll(".fruits:checked")class 获取所有已检查的元素.fruits。Set用它的值创建一个对象。使用filter的过滤器item阵列。var checked = new Set(Array.from(document.querySelectorAll(".fruits:checked")).map(o => o.value));const item = [{"lychee":{"price":10,"lot":8}},{"orange":{"price":12,"lot":6}},{"apple":{"price":8,"lot":3}},{"mango":{"price":12,"lot":5}},{"banana":{"price":4,"lot":1}}];let result = item.filter(o => checked.has(Object.keys(o)[0]));console.log(result);<input class="fruits" type="checkbox" name="fruits" value="lychee" checked> lychee <br /><input class="fruits" type="checkbox" name="fruits" value="orange"> orange <br /><input class="fruits" type="checkbox" name="fruits" value="banana" checked> banana <br />

Answer 3

使用过滤器获取选中的值。然后映射数组并只取每个对象元素的值。var checked = [...inputElements].filter(inputElement => inputElement.checked);var valuesOfChecked = checked.map(item => [Object.values(item)[0].price,Object.values(item)[0].lot])