全选反选JavaScript实现

html代码

<label for="all">全选</label><input type="checkbox" id="all">
<div id="box"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>

JS代码

 var all = document.getElementById("all");var aInput = document.querySelectorAll("#box>input");all.onclick = function () {if (this.checked) {for (var i = 0; i < aInput.length; i++) {aInput[i].checked = true;}} else {for (var i = 0; i < aInput.length; i++) {aInput[i].checked = false;}}};for (var i = 0; i < aInput.length; i++) {aInput[i].onclick = function () {var bStop = true;for (var K = 0; K < aInput.length; K++) {if (!aInput[K].checked) {bStop = false;break;}}if (bStop) {all.checked = true;} else {all.checked = false;}}}

全选反选JavaScript实现相关推荐

jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...
【HTML5】页面点击按钮添加一行删除一行全选反选全不选
页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html><head>< ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
ztree树状实现全选反选
ztree实现全选反选操作:<form id="form" method="post"><div class="D608_compa ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...

全选反选JavaScript实现

全选反选JavaScript实现相关推荐

最新文章

热门文章