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编辑器和代码格式化
Apr 25 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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 curl的深入解析
2013/06/02 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
Three.js学习之网格
2016/08/10 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
初学Python函数的笔记整理
2015/04/07 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python实现爬取图书封面
2018/07/05 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
材料会计岗位职责
2014/03/06 职场文书