javascript - 通过匹配数组检索值

标签 javascript

选中的复选框的值与数组交叉匹配以过滤结果。如何选择价格手数值?

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">

最佳答案

带有适当选择器的querySelectorAll将为您提供选中的值:

注意我从对象数组更改为普通对象

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 res = [...document.querySelectorAll("[name=fruits]:checked")]
             .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>

关于javascript - 通过匹配数组检索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56173440/

相关文章:

javascript - 如何将 JWT 用于使用 Node.js 编写的代理服务器?

javascript - 将事件处理程序附加到正文时,e.stopImmediatePropagation() 未按预期工作

javascript - 将变量从 Php 传递到 js?

c# - 如何将使用 ClientScriptManager.RegisterArrayDeclaration 创建的 javascript 数组返回给服务器?

javascript - 如何使textarea填充其父宽度的宽度?

javascript - jQuery 缩放功能不起作用

javascript - 绑定(bind)到剑道下拉列表未定义

javascript - 如何删除不在另一个对象中的一个对象的属性

javascript - 如何使用 jQuery 遍历订单列表中的每个项目?

javascript - 未捕获的 TypeError : this. transitionTo 不是一个函数