当前位置：首页 > news >正文

JS(JavaScript)中如何实现，复选框checkbox多选功能

news 2025/8/6 7:47:37

起始界面：

代码元素：

  <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+" ");}

运行结果：