列表中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列表的全选按钮遇到各种问题,做的是自适应窗体大小,当窗体最大化导致全选按钮出现与列表数据不一致,特别不搭配,试了很久,网上也找了好多资料各 ...
随机推荐
- 【转】深入浅出JavaScript之闭包(Closure)
闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...
- 一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统
2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为“希赛网”)个人空间发布过一些 ...
- SQL 数据优化之不建立索引的情况
索引可以提高数据的检索效率,也可以降低数据库的IO成本,并且索引还可以降低数据库的排序成本.排序分组操作主要消耗的就是CPU资源和内存,所以能够在排序分组操作中好好的利用索引将会极大地降低CPU资源的 ...
- 萌新笔记——封装hiredis——C++与redis对接(一)(string的SET与GET操作)
在菜鸟教程自学了redis,总想着像Mysql一样,在C/C++中进行对接.于是查询了一些资料,最后找到了hiredis.然而直接用它的话,难免有点不方便.于是,对其进行封装. hiredis直接去g ...
- 64位下pwntools中dynELF函数的使用
这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...
- IIS将错误信息发送到浏览器
本文版权归博客园和dige1993所有,访问作者博客:http://www.cnblogs.com/dige1993 最近又开始玩ASP了,调试的时候出现错误不清楚详细错误信息特别不方便,记得以前可以 ...
- 【repost】js 常见错误类型
1)SyntaxError SyntaxError是解析代码时发生的语法错误 // 变量名错误 var 1a; // 缺少括号 console.log 'hello'); (2)Referenc ...
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- html之select标签
循环select标签 <select name="group_id"> {% for row in group_list %} <option value={{r ...
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
之前在测试环境(centos7.2)上部署了openstack云平台(完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建),openstack在neutron组网 ...