js实现复选框/全选、全不选

来源：互联网发布：知乎live结束后购买编辑：程序博客网时间：2024/04/28 18:21

1.点击全选，所有复选框选中

2，根据复选框复选个数更新全选框状态

3.根据全选框的状态，切换label，flag

4.反选

上面是复选框的各种选项情况，

实现逻辑

一、.给全选框一个鼠标点击事件，把全选框的的状态给复选框

在这里要加上2,3情况的解决

二、反选选项，给反选一个鼠标点击事件，通过循环把复选框的状态进行切换

在这里要加上2,3这2种情况；

三、写一个函数解决2,3问题；

四、给每一个复选框加上鼠标事件，通过三来解决2问题

三的实现：

var isCheckAll = function () {for (var i = 1, n = 0; i < oInput.length; i++) {//oInput[i].checked && n++  /*可以这样写*/if (oInput[i].checked) {n++;}}//oInput[0].checked = n == oInput.length - 1;/*可以这样写*/if (n == oInput.length - 1) {oInput[0].checked = true;} else {oInput[0].checked = false;}oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"};

先通过循环，把复选框选中的个数用n记录下来，

判断，若n等于所有复选框的个数，则全选框的状态为true,然后同时根据条件表达式label的状态切换为全不选

贴上全部js代码：

var oA = document.getElementsByTagName("a")[0];var oInput = document.getElementsByTagName("input");var oLabel = document.getElementsByTagName("label")[0];var isCheckAll = function () {for (var i = 1, n = 0; i < oInput.length; i++) {//oInput[i].checked && n++if (oInput[i].checked) {n++;}}//oInput[0].checked = n == oInput.length - 1;if (n == oInput.length - 1) {oInput[0].checked = true;} else {oInput[0].checked = false;}oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"};//全选/全不选oInput[0].onclick = function () {for (var i = 1; i < oInput.length; i++) {oInput[i].checked = this.checked}isCheckAll()};//反选oA.onclick = function () {for (var i = 1; i < oInput.length; i++) {oInput[i].checked = !oInput[i].checked}isCheckAll()};//根据复选个数更新全选框状态for (var i = 1; i < oInput.length; i++) {oInput[i].onclick = function () {isCheckAll()}}

css3代码：

body,dl,dt,dd,p {margin: 0;padding: 0;}body {font-family: Tahoma;font-size: 12px;}label,input,a {vertical-align: middle;}label {padding: 0 10px 0 5px;}a {color: #09f;text-decoration: none;}a:hover {color: red;}dl {width: 120px;margin: 10px auto;padding: 10px 5px;border: 1px solid #666;border-radius: 5px;background: #fafafa;}dt {padding-bottom: 10px;border-bottom: 1px solid #666;}dt label {font-weight: 700;}p {margin-top: 10px;}

vertical-align表示标签之间的对齐方式

html5代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>复选框（checkbox）全选/全不选/返选</title><link rel="stylesheet" href="y.css"></head><body><dl><dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt><dd><p><input type="checkbox" name="item" /><label>选项（一）</label></p><p><input type="checkbox" name="item" /><label>选项（二）</label></p><p><input type="checkbox" name="item" /><label>选项（三）</label></p><p><input type="checkbox" name="item" /><label>选项（四）</label></p><p><input type="checkbox" name="item" /><label>选项（五）</label></p><p><input type="checkbox" name="item" /><label>选项（六）</label></p><p><input type="checkbox" name="item" /><label>选项（七）</label></p><p><input type="checkbox" name="item" /><label>选项（八）</label></p><p><input type="checkbox" name="item" /><label>选项（九）</label></p><p><input type="checkbox" name="item" /><label>选项（十）</label></p></dd></dl><center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center><script src="y.js"></script></body></html>

0 0