列表中checked全选按钮的实现
用过音乐播放器的人都知道有个全选按钮，如果使用Jquery实现，有个直接选中checked标签的方式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<input type="checkbox" checked="checked" name="check" id="" value="" />
<input type="checkbox" checked="false" name="check" id="" value="" />
<input type="checkbox" name="check" id="" value="" />
<button class="submit" id="submit">全选</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var allLen = $("input[name='check']:checkbox").length; /* 所有的选项卡的长度 */
$(".submit").click(function(){
var checkedLen = $(":checked").length; /* 已被选中的长度 */
if (checkedLen < allLen) {
$("input[name='check']:checkbox").each(function(){
$(this).prop("checked", true);
})
}else{
$("input[name='check']:checkbox").each(function(){
$(this).prop("checked", false);
})
}
})
</script>
</html>
但是如果使用JavaScript，就只能遍历判断了。代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" checked="checked" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<button class="submit1" id="submit1">全选</button>
</body>
<script type="text/javascript">
var select1 = document.getElementById("submit1");
var checkboxs = document.getElementsByTagName("input"); select1.onclick = function(){
var num = 0;
for (k in checkboxs) {
if(checkboxs[k].checked){
num++;
}
}
if (num == checkboxs.length) {
for (var i = 0;i<checkboxs.length;i++) {
checkboxs[i].checked = false;
}
}else{
for (var i = 0;i<checkboxs.length;i++) {
checkboxs[i].checked = true;
}
}
}
</script>
</html>
小知识：Jquery中prop()和attr()相对于checkbox的区别(可见不能用attr()进行checked判断)
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="intersting" id="one" checked="checked" value=""/>
<button id="button">显示prop和attr获取的值</button>
<p class="prop"></p>
<p class="attr"></p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#button").click(function(){
$(".prop").html("prop(): "+$("input[name='intersting']").prop('checked'));
$(".attr").html("attr(): "+$("input[name='intersting']").attr("checked"));
})
</script>
</html>
列表中checked全选按钮的实现的更多相关文章
- jquery中实现全选按钮
<html> <head> <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...
- js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- 全选按钮的设定和POST处理当前循环的列表
以下为全选按钮的代码,通过class实现. //全选按钮 $(function () { $("#selectall").change(function () { var isch ...
- checkbox做全选按钮
1.先写一个html页面,里面写一个全选按钮和几个复选框,实现下面2个要求 (1)点击全选按钮选中时,所有的复选框选中. (2)点击全选按钮取消选中时,所有复选框取消选中. <input typ ...
- 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格
1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- C#Winform窗体 DataGridView全选按钮的实现方式
最近,在做CS程序遇到一个头疼的问题,datagridview列表的全选按钮遇到各种问题,做的是自适应窗体大小,当窗体最大化导致全选按钮出现与列表数据不一致,特别不搭配,试了很久,网上也找了好多资料各 ...
随机推荐
- 使用virtualenv搭建python3开发环境
问题描述 环境: CentOS6.5 想在此环境下使用python3进行开发,但CentOS6.5默认的python环境是2.6.6版本. 之前的做法是直接从源码安装python3,替换掉现有的开发环 ...
- 利用Sharding-Jdbc实现分表
你们团队使用SpringMVC+Spring+JPA框架,快速开发了一个NB的系统,上线后客户订单跟雪花一样纷沓而来. 慢慢地,你的心情开始变差,因为客户和产品的抱怨越来越频繁,抱怨的最多的一个问题就 ...
- Dojo: Quick Start
1.Dojo学习地址 2.Dojo快速开始 2.1.Dojo引入 2.2.指定Dojo模块的位置 2.3.模块加载require 3.查找Dom节点 3.1.根据id查找dom节点 3.2.根据c ...
- spring 定时任务@Scheduled
1.配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:/ ...
- POJ 2255. Tree Recovery
Tree Recovery Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11939 Accepted: 7493 De ...
- python爬虫学习(6) —— 神器 Requests
Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写,真正的为人类着想. Python 标准库中的 urllib2 模块提供了你所需要的大多数 H ...
- 关于IOS调用微信支付jsapi不起作用的解决方法
微信支付时,安卓机调用 jsapi可以支付,IOS就不行,点击立即支付,直接返回原立即支付页面,跟刷新页面差不多,解决方案很简单:两句话而已. 不得不说,微信支付坑太多了,我擦..... <sc ...
- java 旧url 处理的解决方法
@RequestMapping(value = {"/search"}) public void errorPath(HttpServletResponse response, @ ...
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境（5）--问题解决
一.[root@openstack-server ~]# nova listERROR (CommandError): You must provide a username or user id v ...
- [LeetCode] Serialize and Deserialize BST 二叉搜索树的序列化和去序列化
Serialization is the process of converting a data structure or object into a sequence of bits so tha ...