jQuery 的全选(全非选)即取得被选中的值使用介绍


Posted in Javascript onNovember 12, 2013

页面代码

<body> 
<div> 
<input id="checkall" type="checkbox" value="天" />全部<br/> 
<div id="con"> 
<input type="checkbox" name="checkbox" value="天" />天 
<input type="checkbox" name="checkbox" value="空" />空 
<input type="checkbox" name="checkbox" value="飞" />飞 
<input type="checkbox" name="checkbox" value="来" />来 
<input type="checkbox" name="checkbox" value="五" />五 
<input type="checkbox" name="checkbox" value="个" />个 
<input type="checkbox" name="checkbox" value="字" />字 
<input type="checkbox" name="checkbox" value="这" />这 
<input type="checkbox" name="checkbox" value="都" />都 
<input type="checkbox" name="checkbox" value="不" />不 
<input type="checkbox" name="checkbox" value="算" />算 
<input type="checkbox" name="checkbox" value="事" />事</div> 
</div> 
<script src="Scripts/jquery-1.4.1.js" language="javascript"></script> 
<script src="JqueryAll.js" language="javascript"></script> 
</body>

js中的代码
/*js部分 
* 绑定批量选定/非选 
* 例子 
*/ $(function () { 
$("#checkall").click(function () { 
var stu = $(this).attr("checked"); 
checkAll(stu); 
}) 
$("input[name='checkbox']").click(function () { 
uncheckAll(); 
}) 
}) 
function checkAll(status) { 
$("input[name='checkbox']").each(function () { 
$(this).attr("checked"); 
$(this).attr("checked", status); 
}) 
} 
function uncheckAll() { 
alert($("input[name='checkbox']:checked").length); 
if ($("input[name='checkbox']:checked").length == $("input[name='checkbox']").length) { 
$("#checkall").attr("checked",true); 
} 
else { 
$("#checkall").attr("checked", false); 
} 
}
Javascript 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
jquery 模板的应用示例
Nov 12 #Javascript
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
You might like
php操作mysql数据库的基本类代码
2014/02/25 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js调用css属性写法
2013/09/21 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python解惑之True和False详解
2017/04/24 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014年组织部工作总结
2014/11/14 职场文书
解除租房协议书
2014/12/03 职场文书
婚礼新人答谢词
2015/01/04 职场文书
社区服务活动报告
2015/02/05 职场文书
离婚纠纷代理词
2015/05/23 职场文书
邹越演讲观后感
2015/06/15 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
PyTorch中permute的使用方法
2022/04/26 Python