起始界面:
代码元素:
<p><input type="checkbox" id="checkedAll"> 全选按钮</p>
<p><input type="checkbox" class="cl"> 选项1</p>
<p><input type="checkbox" class="cl">选项2</p>
<p><input type="checkbox" class="cl">选项3</p>
<p><input type="checkbox" class="cl">选项4</p>
实现多选功能:
<script>
var checkedAll = document.getElementById('checkedAll');
var optionList = document.querySelectorAll('.cl');
checkedAll.onchange = function () {
for (var i = 0; i < optionList.length; i++) {
optionList[i].checked = checkedAll.checked;
}
};
for (let i = 0; i < optionList.length; i++) {
optionList[i].onclick = function(){
checkedAll.checked = Array.from(optionList).every(function(item){
return item.checked;
})
}
}
</script>
注意:
当我们通过querySelectorAll()获取的类元素是一个伪数组,因此我们需要将其转化为真正的数组
Array.from(arr):将其转为数组
arr.every(function(item){
return item.checked;
}
以上代码指的是,数组中任何一个元素(item),都被选中;
例子:
var arr = [12, 48, 56, 3, 25, 60];
// var flag = arr.every(function (item) {
// return item > 2;
// })
var flag = arr.every((item) => {
return item > 2;
})
console.log(flag);
arr.every()返回的是一个boolean值,指的是每一个元素都大于2,返回true;
var arr = [12, 48, 56, 3, 25, 60];
// var flag = arr.some(function (item) {
// return item > 50;
// })
var flag = arr.some((item) => {
return item > 50;
})
console.log(flag);
arr.every()返回的是一个boolean值,指的是只要有一个元素大于50,返回true;
var arr = [12, 48, 56, 3, 25, 60];
var newArr = [];
// var newArr = arr.filter(function (item) {
// return item > 50;
// })
var newArr = arr.filter((item) => {
return item > 30;
})
for (const element of newArr) {
console.log(element+" ");
}
arr.filter()返回的是一个数组,是一个过滤器,指的是返回数字大于30的数组元素;
var arr = [12, 48, 56, 3, 25, 60];
var newArr = [];
// var newArr = arr.filter(function (item) {
// return item > 50;
// })
var newArr = arr.filter((item) => {
return item > 30;
})
for (const element of newArr) {
console.log(element+" ");
}
运行结果: