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 动态参数判空操作
Dec 22 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
React父子组件间的传值的方法
Nov 13 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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二分法在IP地址查询中的应用
2008/08/12 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript比较文档位置
2008/04/08 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
python实现批量监控网站
2016/09/09 Python
Python paramiko模块的使用示例
2018/04/11 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python中if及if-else如何使用
2020/06/02 Python
python解包用法详解
2021/02/17 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
交通事故协议书范文
2014/04/16 职场文书
企业金融服务方案
2014/06/03 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
捐款感谢信
2015/01/20 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
java设计模式--原型模式详解
2021/07/21 Java/Android
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
搭建Yolov5服务器
2022/04/30 Servers