jQuery checkBox 全选的例子
表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 checkBox 直至全选时，经常会忘记修改全选 checkBox 的状态，某知名互联网公司的网盘就会出现这样的问题，问题如图：
所以，需要给 checkBox 的点击事件做一下处理：点击时遍历一下除了全选的单选框之外的所有单选框，如果有未选中的，则全选不选中，如果全部都选中了，则修改全选框的状态，以下是我写的一个简单的例子：
运行结果：
以下就是例子的全部代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<style>
ul,li{
list-style:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
function clickAll(){
$(".checkOne").prop("checked",$(".checkAll").prop("checked"));
} function clickOne(){
var allChecked = true;
$(".checkOne").each(function(){
if($(this).prop("checked") == false){
allChecked = false;
};
});
if(allChecked){
$(".checkAll").prop("checked",true);
} else {
$(".checkAll").prop("checked",false);
}
}
</script>
</head>
<body>
<ul>
<li><input type="checkBox" class="checkAll" onclick="clickAll()" id="all"/><label for="all">爱好(全选)</label></li>
<br/>
<li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck1"/><label for="ck1">足球</label></li>
<li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck2"/><label for="ck2">网球</label></li>
<li><input type="checkBox" class="checkOne" onclick="clickOne()" id="ck3"/><label for="ck3">篮球</label></li>
</ul>
</body>
</html>
一起学习，有问题欢迎拍砖吐槽……
jQuery checkBox 全选的例子的更多相关文章
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- jQuery checkbox 全选
jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false 高版本中jQuery 提供prop ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- jquery checkbox 全选、取消全选
$("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...
- jquery checkbox全选 获取值
<style> table { line-height:35px; }</style> <div align="left" style="m ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- JQuery checkbox全选多次点击后无效解决方法
1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...
- 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别
$("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...
随机推荐
- C++调用C#库简单例程
有些时候,为了使用别人已经写好的C#库文件,我们需要使用C++调用C#库文件: 以下做了一简单的调用工程,步骤如下: 1.准备C#库 (dll文件) 1)创建C#库: 2)编写C#类: ...
- TLS握手优化详解
随着 HTTP/2 的逐渐普及,以及国内网络环境越来越糟糕(运营商劫持和篡改),HTTPS 已经开始成为主流.HTTPS 在 TCP 和 HTTP 之间增加了 TLS(Transport Laye ...
- Ubuntu15.04 安装Android开发环境
一.安装Java SE JKD A.下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSite ...
- AlloyTouch实现下拉刷新
原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh 效果展示 扫码体验 你也可以点击这里访问Demo 可以点击这里查看代 ...
- ngrok 2016版
1. 先到http://www.ngrok.cc/下载客户端 2.进管理页面 注册登录 3.绑定域名 新增: 复制客户端id 打开该目录 按住shift 右键->在此处打开命令窗口 输入 sta ...
- ASP.NET通过byte正确安全的判断上传文件格式
本文介绍一种更安全的方式上传图片,他能有效的防止一些通过修改文件后缀或MIME来伪造的图片的上传,从而保证服务器的安全,希望对大家有所帮助. ASP.NET中在判断文件格式时,我们以前常用的方法就是通 ...
- [转]epoll技术
在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll. 相比于select,epoll最大的好处在于它不会随着监听fd数目 ...
- java开发常用命令
cd /d e:work2,更改至当前工作目录svnup.bat,批量更新所有项目 @echo off for /D %%i in (.\*) do ( echo %%i svn up %%i )ho ...
- oracle PL/SQL（procedure language/SQL）程序设计之触发器（trigger）
创建触发器 触发器类似于过程和函数,都拥有声明.执行和异常处理过程的带名PL/SQL块.与包类似,触发器必须存储在数据库中.前面已经讲过,过程是显式地通过过程调用执行的,同时过程调用可以传递参数.与之 ...
- AngularJs指令（一）
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...