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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 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
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JS实现图片翻书效果示例代码
2013/09/09 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python列表和元组的定义与使用操作示例
2017/07/26 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python中subprocess批量执行linux命令
2018/04/27 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python2和python3哪个使用率高
2020/06/23 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
网络技术支持面试题
2013/04/22 面试题
大学在校生求职信范文
2013/11/21 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
工程质量承诺书范文
2014/03/27 职场文书
学雷锋月活动总结
2014/04/25 职场文书
社区禁毒工作方案
2014/06/02 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
安全教育日主题班会
2015/08/13 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书