复选框的全选反选实现（即购物车的复选框实现）

这周工作时在做全选时遇到卡壳，趁着闲暇时间整理一下全选的的几种实现方式。
html页面

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>测试页面</title><script src = "jquery.js"></script><script src = "test.js"></script></head><body><input type = "checkbox" id = "allCheck"/>全选</th><br/><input type = "checkbox" name = "check"/></th><input type = "checkbox" name = "check"/></th><input type = "checkbox" name = "check"/></th><input type = "checkbox" name = "check"/></th></body>
</html>

js代码

第一种方式

 //全选框$("#allCheck").click(function(){if($(this).attr("checked")){$("input[name='check']").attr("checked",true);}else{$("input[name='check']").attr("checked",false);}})//单选框$("input[name='check']").change(function(){if($("input[name='check']").not("input:checked").size() <= 0){$("#allCheck").attr("checked",true);}else{$("#allCheck").attr("checked",false);}})

第二种方式

 //全选框$("#allCheck").click(function(){$("input[name='check']").prop("checked",this.checked);})//单选框$("input[name='check']").change(function(){if($("input[name='check']").not("input:checked").size() <= 0){$("#allCheck").prop("checked",true);}else{$("#allCheck").prop("checked",false);}})

第三种方式（原生js）

 //全选框$("#allCheck").click(function(){var a = document.getElementById("allCheck");var b = document.getElementsByName("check");if(a.checked){for(var i = 0; i < b.length; i++){b[i].checked = true;}}else{for(var i = 0; i < b.length; i++){b[i].checked = false;}}})//单选框$("input[name='check']").click(function(){var flag = true;var a = document.getElementById("allCheck");var b = document.getElementsByName("check");for(var i = 0; i < b.length; i++){if(!b[i].checked){flag = false;break;}}a.checked = flag;});

复选框的全选反选实现（即购物车的复选框实现）相关推荐

【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
如何利用jq来实现复选框的全选，反选！
如何利用jq来实现复选框的全选,反选! $("document").ready(function(){ $("#btn1").click(function() ...
Jquery第二章常用方法，一二级菜单淡入淡出，event事件，复选框的全选反选第一节
hide() show() 通过滑动效果 slideToggle() 淡入淡出 fadeIn() fadeout() 向上向下拉动 slideup() slidedown() 源码: <!DO ...
js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
纯js实现复选框的全选、反选与获取选中复选框的值
实现效果如下: 全选状态: 取消全选: 获取选中的复选框的值: 下面开始上代码! html <div><h2>爱好</h2><hr><form a ...
js实现复选框的全选、取消全选、反选
思路很简单: 全选:将所有复选框的checked设置为true 取消全选:将所有复选框的checked设置为false 反选:将所有选中的复选框设置为false,未选中的设置为true.即将check ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
元素的选中问题元素选中的问题切换复选框选中全选和全不选
元素的选中问题 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...

复选框的全选反选实现（即购物车的复选框实现）

复选框的全选反选实现（即购物车的复选框实现）相关推荐

最新文章

热门文章