在我正在处理的Web应用程序中,有很多地方我需要将许多HTML复选框转换为所选项目的JS数组。例如:
<input type="checkbox" class="example" data-item="3">
<input type="checkbox" class="example" data-item="5">
<input type="checkbox" class="example" data-item="7">
<input type="checkbox" class="example" data-item="11">
然后我有很多这样的逻辑将所选值打包成一个数组:
var items = [];
$('.example[data-item]:checked').each(function (_, e) {
items.push(Number($(e).data('item')));
});
我的问题是这样的:有一些很好的方法可以在单行中执行此操作(如果需要,可以使用jQuery),例如:
var items = /* magic */;
我意识到我可以为此编写一个函数,如果没有其他方法可以清楚地表达,我会寻找一些内置的JS魔法可以一次完成。
为了完整性,这里有一个片段:
$('#button').click(function () {
var items = [];
$('.example[data-item]:checked').each(function (_, e) {
items.push(Number($(e).data('item')));
});
alert(JSON.stringify(items));
});
label { display: flex; align-items: center; }
div { display: inline-flex; flex-direction: column; }
button { margin: 1ex; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" class="example" data-item="3"> Item 3</label>
<label><input type="checkbox" class="example" data-item="5"> Item 5</label>
<label><input type="checkbox" class="example" data-item="7"> Item 7</label>
<label><input type="checkbox" class="example" data-item="11"> Item 11</label>
<label><input type="checkbox" class="example" data-item="13"> Item 13</label>
<label><input type="checkbox" class="example" data-item="17"> Item 17</label>
<label><input type="checkbox" class="example" data-item="19"> Item 19</label>
<button id="button">Click Me</button>
</div>
答案 0 :(得分:1)
是的,您可以使用地图功能:
var tempValue=$('input:checkbox').map(function(n){
if(this.checked){
return this.value;
};
}).get().join(',');
console.log(tempValue);
答案 1 :(得分:1)
我没有看到您的代码有任何问题,但另一种方法是使用map()
并返回您需要的内容:
$('#button').click(function() {
var items = $(".example[data-item]:checked").map(function() {
return $(this).data('item');
}).get();
console.log(items);
});
&#13;
label {
display: flex;
align-items: center;
}
div {
display: inline-flex;
flex-direction: column;
}
button {
margin: 1ex;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" class="example" data-item="3"> Item 3</label>
<label><input type="checkbox" class="example" data-item="5"> Item 5</label>
<label><input type="checkbox" class="example" data-item="7"> Item 7</label>
<label><input type="checkbox" class="example" data-item="11"> Item 11</label>
<label><input type="checkbox" class="example" data-item="13"> Item 13</label>
<label><input type="checkbox" class="example" data-item="17"> Item 17</label>
<label><input type="checkbox" class="example" data-item="19"> Item 19</label>
<button id="button">Click Me</button>
</div>
&#13;
答案 2 :(得分:1)
const checkedItems = Array.from(document.querySelectorAll('[checked]')).reduce((items, el) => {
// save whatever you want from the elmenent here
items = items.concat(el)
return items;
}, [])