讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

javascript实现checkBox的全选，反选与赋值_javascript技巧

php中文网
发布： 2016-05-16 16:10:14
原创
1298人浏览过

我们平时在做项目的时候，经常会遇到需要实现实现checkbox的全选，反选与赋值的情况，网上也有许多的范例，这里给大家分享的是本人常用的方法，推荐给大家。

复制代码 代码如下:

//js 数值是否在数组中
Array.prototype.in_array = function(e){
　　for(i=0;i 　　　　if(this[i] == e)
　　　　　　return true;
　　}
　　return false;
}
//js数组index
Array.prototype.find_str=function(string){
　　var str = this.join("");
　　return str.indexOf(string);
}
var houseIds=new Array();
$("#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 　　　　　　if(ids[i].checked)
　　　　　　houseIds.push(ids[i].value);
　　　　}
　　alert(houseIds);
　　}else{
　　　　$("[name='checkboxes']").removeAttr("checked");//反选 删除Ids
　　　　houseIds=[];
　　　　alert(houseIds);
　　}
})
//单选增加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有所帮助。

AIBox 一站式AI创作平台
AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

AIBox 一站式AI创作平台 224
查看详情 AIBox 一站式AI创作平台
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript数据结构与算法之栈详解_javascript技巧 下一篇：jquery实现表格本地排序的方法_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
异步函数错误处理最佳实践_避免未捕获的Promise拒绝 正确处理异步错误需在async函数中用try-catch捕获await异常（1）所有await应置于try-catch内并按需重试或抛出（2）顶层调用须通过asyncHandler等包装器确保错误传递（3）监听unhandledRejection作为最后防线（4）避免遗漏return导致Promise脱离上下文。
2025-12-04 19:23:01
306
JavaScript拖拽功能实现_javascript交互效果 实现JavaScript拖拽需监听mousedown、mousemove和mouseup事件。1.原理：按下时记录偏移并开启拖拽状态，移动时计算新位置更新样式，松开时结束状态。2.代码示例中通过offsetX、offsetY计算位置，结合absolute定位实现元素跟随鼠标移动。3.优化包括设置cursor:move、限制范围、提升z-index及兼容触屏设备。4.注意事项有避免默认行为、合理处理事件解绑与布局影响。掌握基础逻辑后可扩展排序、上传等高级功能。
2025-12-04 19:20:02
956
javascript_如何实现响应式布局 响应式布局的核心是HTML和CSS，JavaScript通过监听窗口变化、配合媒体查询、动态调整DOM类名及防抖优化来增强响应式行为，实现多设备适配。
2025-12-04 19:18:44
438
JavaScript顶层await使用_javascript模块加载 顶层await允许在ES模块顶层直接使用await，无需包裹在async函数中。它使模块能暂停执行直至异步操作完成，适用于动态配置加载、条件导入和资源预初始化。需使用.mjs文件或设置"type":"module"，并在支持的环境（如Node.js14.8+、现代浏览器）中运行。模块变为异步后会阻塞导入者，应避免滥用以防影响性能。主流浏览器和Node.js已广泛支持该特性。
2025-12-04 19:11:29
983
javascript_设计模式在项目中的应用 单例模式确保全局唯一实例，如配置对象；观察者模式实现组件解耦通信，通过事件总线通知状态变化；工厂模式统一创建相似对象，按角色生成按钮；装饰器模式动态扩展功能，如为方法添加日志和性能监控。
2025-12-04 19:06:30
778
javascript_WebSocket实时通信 WebSocket通过一次HTTP握手将协议升级为全双工通信，允许客户端与服务器实时交换数据。前端使用原生API创建连接、监听事件并发送消息，后端如Node.js配合ws库处理连接与广播。需注意重连机制、连接状态检查、使用wss加密、消息节流及服务端资源释放，以保障稳定性和安全性。
2025-12-04 18:56:02
372
javascript_如何实现支付功能 实现支付功能需前后端配合，前端用JavaScript发起订单请求并处理支付参数，后端负责创建订单、调用支付API及验证结果。根据地区选择微信支付、支付宝或Stripe、PayPal等渠道，前端集成对应SDK完成支付调用，后端确保金额安全与结果校验，通过Webhook或轮询更新订单状态。
2025-12-04 18:52:02
626
javascript_事件循环机制详解 事件循环先执行同步任务，再处理异步回调；宏任务如setTimeout后，微任务如Promise.then优先执行，确保高响应性，输出顺序体现任务优先级差异。
2025-12-04 18:51:06
145
JavaScript装饰器使用_javascript语法增强 装饰器函数可监听修改类行为，如用@log记录方法调用，@register注册类，或验证属性值，提升代码复用与元编程能力。
2025-12-04 18:47:02
372
JavaScript设计模式_javascript编程艺术 JavaScript设计模式提升代码可维护性与复用性。1.创建型模式：单例确保唯一实例，工厂按条件创建对象，构造器支持自定义初始化。2.结构型模式：装饰器动态扩展功能，适配器转换接口，代理控制对象访问。3.行为型模式：观察者实现状态通知，策略封装可互换算法，命令将请求对象化。合理选用模式可优化程序结构，增强灵活性与协作效率。
2025-12-04 18:45:07
859
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部