<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<meta name="viewport" content="width=device-width, initial-scale=1"> ???<title>JS实现确认反选和取消功能</title></head><body><table id="t1" border="1"> ???<thead> ???<th>ID</th> ???<th>Content-01</th> ???<th>Content-02</th> ???</thead> ???<tbody id="checkboxList"> ???<tr> ?????<td><input type="checkbox" name="items" id="c1"></td> ?????<td>Aliex</td> ?????<td>抽烟</td> ???</tr> ???<tr> ?????<td><input type="checkbox" name="items" id="c2"></td> ?????<td>Egon</td> ?????<td>喝酒</td> ???</tr> ???<tr> ?????<td><input type="checkbox" name="items" id="c3"></td> ?????<td>Wxx</td> ?????<td>汤头</td> ???</tr> ???</tbody> ?</table> ?<input id="checkall" type="button" value="全选" > ?<input id="checkReverse" type="button" value="反选" > ?<input type="checkbox" id="flagCheck" hidden> ?<input id="checkNo" type="button" value="取消" ><script src="jquery-3.3.1.min.js"></script><script type="text/javascript"> ???// 处理全选 ???document.getElementById(‘checkall‘).onclick=function(){ ???/*************************************************/ ???????// 获取所有的复选框 ???????var checkElements=document.getElementsByName(‘items‘); ???????for(var i=0;i<checkElements.length;i++){ ???????????var checkElement=checkElements[i]; ???????????checkElement.checked="checked"; ???????} ???} ???/*************************************************/ ???// 处理全不选 ???document.getElementById(‘checkNo‘).onclick=function(){ ???????// 获取所有的复选框 ???????var checkElements=document.getElementsByName(‘items‘); ???????for(var i=0;i<checkElements.length;i++){ ???????????var checkElement=checkElements[i]; ???????????checkElement.checked=null; ???????} ???} ???/***************************************************/ ???//反选 ????document.getElementById(‘checkReverse‘).onclick=function(){ ???????// 获取所有的复选框 ???????var checkElements=document.getElementsByName(‘items‘); ???????for(var i=0;i<checkElements.length;i++){ ???????????var checkElement=checkElements[i]; ???????????if (checkElement.checked) { ???????????????checkElement.checked=null; ???????????} ???????????else{ ???????????????checkElement.checked="checked"; ???????????} ???????} ???} ???/***************************************************/ ???//全选/不选 ???document.getElementById(‘checkItems‘).onclick=function() ???{ ????// 获取所有的复选框 ???????var checkElements=document.getElementsByName(‘items‘); ???????if (this.checked) { ???????????for(var i=0;i<checkElements.length;i++){ ???????????????var checkElement=checkElements[i]; ???????????????checkElement.checked="checked"; ???????????} ???????} ???????else{ ???????????for(var i=0;i<checkElements.length;i++){ ???????????????var checkElement=checkElements[i]; ???????????????checkElement.checked=null; ???????????} ???????} ???}</script></body></html>JS实现确认、反选、取消按钮功能
原文地址：http://blog.51cto.com/11019859/2089869