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学习笔记(十)
Jan 17 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
vue-cli3 热更新配置操作
Sep 18 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中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
javascript 实现map集合
2015/04/03 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
js中apply和call的理解与使用方法
2019/11/27 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
如何运行带参数的python脚本
2019/11/15 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
J2EE中的容器都包括哪些
2013/08/21 面试题
共筑中国梦演讲稿
2014/04/23 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android