首頁猿問通過匹配數(shù)組來檢索值

通過匹配數(shù)組來檢索值

JavaScript

慕標(biāo)琳琳 2019-04-18 18:19:18

選中復(fù)選框的值與數(shù)組交叉匹配到fileter結(jié)果。我該如何選擇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">

查看完整描述

4 回答

開心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

querySelectorAll使用適當(dāng)?shù)倪x擇器將為您提供選中的值：

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

反對(duì) 回復(fù) 2019-05-17

慕的地6264312

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以使用document.querySelectorAll(".fruits:checked")獲取所有帶有類的已檢查元素.fruits。Set用它的值創(chuàng)建一個(gè)對(duì)象。

使用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 />

反對(duì) 回復(fù) 2019-05-17

飲歌長嘯

TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊

使用過濾器獲取選中的值。

然后映射數(shù)組并僅獲取每個(gè)對(duì)象元素的值。

var checked = [...inputElements].filter(inputElement => inputElement.checked);

var valuesOfChecked = checked.map(item => [Object.values(item)[0].price,Object.values(item)[0].lot])

反對(duì) 回復(fù) 2019-05-17

4 回答
0 關(guān)注
499 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

通過匹配數(shù)組來檢索值

通過匹配數(shù)組來檢索值

4 回答

添加回答