问题描述
我有以下函数,该函数使用给定的元素名称获取html表单上的所有选中的复选框。我有一个宽松的认识,那就是reduce函数可以代替.map和.join节,因此我正在寻找一个正确的方法来实现该方法,以及是否还有其他步骤可以优化此函数?
function getCheckedValuesOf(elmName){
return [...document.getElementsByName(elmName)].filter(box=>box.checked==true).map(box=>box.value).join(",")
}
解决方法
function getCheckedValuesOf(elmName) {
return [...document.getElementsByName(elmName)]
// acc is value returned by previous iteration
// curr is the current iterated element
.reduce((acc,curr) => {
// do nothing on unchecked
if (curr.checked) {
// add a,only if acc is not empty,to prevent useless starting,acc += (acc !== "" ? "," : "") + curr.value
}
// always return acc,or next iteration will have acc === undefined
return acc;
// second argument of reduce is the initial value of acc
// if not set then it default to the first element of the array
// and the iteration starts on the second element
},'')
}
document.getElementById("log").onclick = () => console.log(getCheckedValuesOf("name"))
console.log(getCheckedValuesOf("name"))
<input type="checkbox" name="name" checked="false" value="i1"/>i1
<input type="checkbox" name="name" value="i2"/>i2
<input type="checkbox" name="name" checked="false" value="i3"/>i3
<input type="checkbox" name="name" value="i4"/>i4
<input type="checkbox" name="name" checked="false" value="i5"/>i5
<input type="checkbox" name="name" value="i6"/>i6
<button id="log">log</button>
,
您可以尝试这个吗?让我知道它是否有效。
function getCheckedValuesOf(elmName) {
return [...document.getElementsByName(elmName)].reduce((a,b) => b.checked && b.value && (a.length>0 ? `${a},${b.value}`: `${a} ${b.value}`) || a,"");
}
,
您只能使用reduce来做到这一点。根据@akshaybande的答案进行了修改,以修正错误(如前导“,”等)
function getCheckedValuesOf(elmName) {
return [...document.getElementsByName(elmName)].reduce((acc,cur) => {
if (cur.checked && cur.value){
return acc.length >= 1 ? `${acc},${cur.value}` : `${cur.value}`
}
return acc;
},"");
}
document.getElementById("log").onclick = () => console.log(getCheckedValuesOf("name"))
console.log(getCheckedValuesOf("name"))
<input type="checkbox" name="name" checked="false" value="1"/>1
<input type="checkbox" name="name" value="2"/>2
<input type="checkbox" name="name" value="3"/>3
<input type="checkbox" name="name" value="4"/>4
<input type="checkbox" name="name" checked="false" value="5"/>5
<input type="checkbox" name="name" value="6"/>6
<button id="log">log</button>
,
像这样吗?
function getCheckedValuesOf(elmName) {
return [...document.getElementsByName(elmName)]
.reduce((str,box) => {
if (box.checked == true) {
str += box.value +','
}
return str;
},'');
}
document.querySelector('button').onclick = () => {
console.log(getCheckedValuesOf('input'))
}
<input type="checkbox" checked name="input" value="1">
<input type="checkbox" name="input" value="2">
<input type="checkbox" name="input" value="3">
<input type="checkbox" checked name="input" value="4">
<input type="checkbox" name="input" value="5">
<button>click</button>