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 相关文章推荐
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
详解CocosCreator消息分发机制
Apr 16 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来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
测绘工程本科生求职信
2013/10/10 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
操行评语大全
2014/04/30 职场文书
服务标兵事迹材料
2014/05/04 职场文书
2019安全宣传标语大全
2019/08/14 职场文书