javascript实现checkBox的全选,反选与赋值


Posted in Javascript onMarch 12, 2015

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

//js 数值是否在数组中

Array.prototype.in_array = function(e){
for(i=0;i<this.length;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 < ids.length; 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有所帮助。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
一分钟理解js闭包
May 04 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
js实现百度搜索提示框
Feb 05 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
原生js实现轮播图特效
May 04 Javascript
VUE动态生成word的实现
Jul 26 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 #Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 #Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 #Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 #Javascript
jquery图形密码实现方法
Mar 11 #Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 #Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php实现多城市切换特效
2015/08/09 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python正则表达式如何匹配中文
2020/05/27 Python
详解python datetime模块
2020/08/17 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
护士长竞聘演讲稿
2014/04/30 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
学校食堂标语
2014/10/06 职场文书
教师个人培训总结
2015/02/11 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
详解Laravel制作API接口
2021/05/31 PHP
分享几个简单MySQL优化小妙招
2022/03/31 MySQL