jquery实现全选/反选功能
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多选框全选/反选</title>
<script src="http://res01.xesimg.com/jquery/jquery.min.js"></script>
</head>
<body>
<div class="demo">
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</div>
</body>
</html>
<script type="text/javascript">
//全选或全不选
$("#all").click(function(){
console.log(this.checked)
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
});
//设置全选复选框
$("#list :checkbox").click(function(){
allchk();
});
//获取选中选项的值
$("#getValue").click(function(){
var valArr = new Array;
$("#list input[type=checkbox]:checked").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if(this.checked){
chk++;
}
});
if(chknum==chk){//全选
$("#all").prop("checked", true);
}else{//不全选
$("#all").prop("checked", false);
}
}
</script>
相关文章
- 自己动手丰衣足食之表格排序插件jquery.tableSort.js
- jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作
- [Web 前端] Jquery实现可直接编辑的表格
- jquery操作select(增加,删除,清空)
- JQuery Mobile+ iscroll 列表滚动条的实现
- 使用jQuery实现返回顶部功能
- jQuery UI在Server 2008 IE8下DatePicker问题修复
- jQuery实现判断li的个数从而实现其他功能
- 解密jQuery事件核心 - 绑定设计(一)
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
- jQuery 获取DOM节点的两种方式
- Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析
- 用一句JQuery代码实现表格的简单筛选
- Jquery实现Bootstrap树形列表
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
- 电子签章盖章之jQuery插件jquery.zsign
- 使用jQuery OCUpload实现excel文件一键上传功能
- SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
- jQuery UI 实例 - 按钮(Button)
- 【Python成长之路】从 零做网站开发 -- 基于Flask和JQuery,实现表格管理平台
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
- jQuery 复制节点的元素实现加入到购物车功能
- python web py入门(69)- jQuery - 实现页面显示字体的格式切换
- python web py入门(66)- jQuery - 隐藏显示实现界面大小可变布局
- jquery的选择器$('')在IE6下对JS动态生成(比如ajax生成的)的元素失效的解决办法