JavaScript实现CheckBox全选、反选与赋值的方法

作者:拾光

时间:2026-10-29

浏览:231

本文分享了一种使用JavaScript实现CheckBox全选、反选及获取选中值的方法。通过扩展Array原型实现in_array和find_str功能,结合jQuery操作DOM属性,演示了如何动态管理选中ID数组,适用于常见的前端表单交互场景。

文章目录

JavaScript实现CheckBox全选、反选与赋值的方法

在项目开发中,经常需要处理CheckBox的全选、反选及赋值功能。虽然网上已有不少相关范例,这里分享作者常用的实现方式,供参考使用。

具体实现代码

具体实现代码如下:

首先定义一个辅助函数,用于判断数值是否存在于数组中。
Array.prototype.in_array = function(e){
for(i=0;i<this.length;i++){
if(this[i] == e)
return true;
  }
return false;
}
接着定义另一个辅助函数,用于查找字符串在数组连接后的索引位置。
Array.prototype.find_str=function(string){
var str = this.join("");
return str.indexOf(string);
}
初始化一个用于存储房屋ID的数组。
$("#chebox-list-all").click(function(){
if($("#chebox-list-all").attr("checked")){
$("[name='checkboxes']").attr("checked",'true');//全选 增加id
var ids = document.getElementsByName('checkboxes');
var value = new Array();
for(var i = 0; i < ids.length; i++){
if(ids[i].checked)
houseIds.push(ids[i].value);
    }
alert(houseIds);
}else{
$("[name='checkboxes']").removeAttr("checked");//反选 删除Ids
houseIds=[];
alert(houseIds);
  }
})
以下代码处理单个CheckBox的选中状态,用于增加或减少ID。
function check(obj){
if(!houseIds.in_array(obj.value)){
houseIds.push(obj.value);
alert(houseIds);
}else{
var index=houseIds.find_str(obj.value);
houseIds.splice(index, 1)
alert(houseIds);
  }
}

以上即为该示例的全部代码,旨在帮助读者学习如何使用JavaScript控制CheckBox的全选、反选及赋值功能。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章