HTML中如何写for循环全选,JavaScript之全选/反选/取消，for循环闭包

需求:table中要求点击红色单元格和点击checkbox的效果一样，最后一行点击就是全选、反选、取消选择的效果。

Title

table{

width: 400px;

height: 15px;

background-color: palegreen;

text-align: center;

}

.check{

width: 20%;

background-color: indianred;

}

input{

display: inline-block;

vertical-align:middle;

}

div{

display: inline-block;

width: 400px;

}

div input{

display: inline-block;

width: 20%;

}

.select{

background-color: bisque;

}

	富贵竹	绿萝
	栀子花	月季
	金银花	菊花
	玫瑰	百合

var ele= document.getElementsByTagName("input");

var check= document.getElementsByClassName("check");

var inputcheck= document.getElementsByClassName("inputcheck");

var all = document.getElementsByClassName("selectall")[0];

var reserve = document.getElementsByClassName("reserve")[0];

var cancel = document.getElementsByClassName("cancel")[0];

//for循环闭包

for(var i=0;i

var td = check[i];

td.onclick = function () {

var td = check[i];

return function () {

var input = td.getElementsByTagName("input")[0];

if(input.checked){

input.checked = false;

}else {

input.checked = true;

}

}

}(i)

}

//for循环闭包

for(var i=0;i

var input = inputcheck[i];

input.onclick = function () {

var input = inputcheck[i];

return function () {

if(input.checked){

input.checked = false;

}else {

input.checked = true;

}

}

}(i)

}

//全选

all.οnclick=function () {

for(var i=0;i

ele[i].checked=true;

}

}

//反选

reserve.οnclick=function () {

for(var i=0;i

if(ele[i].checked){

ele[i].checked=false;

}

else {

ele[i].checked=true;

}

}

}

//取消

cancel.onclick =function () {

for(var i=0;i

ele[i].checked=false;

}

}