checkbox使用示例


Posted in Javascript onAugust 23, 2013
<html> 
<head> 
<title> 
checkbox测试 
</title> 
<script type='text/javascript' src='jquery-1.8.2.min.js'></script> <script type="text/javascript"> 
$(document).ready(function(){ 
$("#all").change(function() { 
//alert($("#all").val()); //获得checkbox的值 
// alert($("#all").get(0).checked); //值为true 和false 
if($("#all").get(0).checked){ //将jquery对象转化为dom对象 使用的是dom对象的属性 
$(":checkbox").attr({ 
//checked: 'checked' 可以和下面一句替换 
"checked":true 
}); 
}else{ 
//$(":checkbox").removeAttr('checked'); 可以和下面一句替换 
$(":checkbox").attr({ 
"checked":false 
}); 
} 
//第一种操作数组方法 
/* //each(function()) 函数 
var arr=new Array(); //一般处理是checkbox中值用数组表示 传递到后台 
var i=0; 
$(":checkbox").each(function(index){ 
if($(this).val()=="1"){ 
return true; 
} 
arr[i]=$(this).val(); 
alert(i +"前面是下标后面是值"+ arr[i++]); //获得checkbox 值 
}); */ 
//第二种操作数组方法 
var arr= new Array(); 
$(":checkbox").each(function(index){ 
if($(this).val()!="1"){ 
arr.push($(this).val()); 
} 
}); 
//组个输出数组值 
for(var j=0;j<arr.length;j++){ 
alert(arr[j]); 
} 
var str=arr.join(","); //将数组用,好连接成为字符串 
alert(str); //输出字符串 
}); 
}); 
</script> 
</head> 
<body> 
<input type='checkbox' id='all' value='1' />全选<br /> 
<input type='checkbox' id='all1' value='2' />num1<br /> 
<input type='checkbox' id='all2' value='3' />num2<br /> 
<input type='checkbox' id='all3' value='4' />num3<br /> 
<input type='checkbox' id='all5' value='5' />num4<br /> 
</body> 
</html>
Javascript 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
js实现秒表计时器
Dec 16 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 #Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 #Javascript
JS获取地址栏参数的小例子
Aug 23 #Javascript
jquery利用ajax调用后台方法实例
Aug 23 #Javascript
点击进行复制的JS代码实例
Aug 23 #Javascript
关于JS中的闭包浅谈
Aug 23 #Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 #Javascript
You might like
PHP 采集心得技巧
2009/05/15 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
BootStrap中
2016/12/10 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
react的hooks的用法详解
2020/10/12 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python中Selenium模块的使用详解
2020/10/09 Python
python openssl模块安装及用法
2020/12/06 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
Java语言程序设计测试题选择题部分
2014/04/03 面试题
料理师求职信
2014/01/30 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
企业安全生产规章制度
2015/08/06 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Python if else条件语句形式详解
2022/03/24 Python
优化Mysql查询的示例
2022/04/26 MySQL