以表格为例的全选、全不选、反选

最新推荐文章于 2021-07-24 11:41:53 发布

GoCZ

最新推荐文章于 2021-07-24 11:41:53 发布

阅读量477

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML JavaSpript

本文链接：https://blog.youkuaiyun.com/qq_40551994/article/details/90730108

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaSpript

3 篇文章

订阅专栏

本文介绍了一种在HTML表格中实现全选、全不选和反选功能的方法，通过使用JavaScript来操作表格中的复选框，提高了用户在处理大量数据时的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建表格

<table border="1" cellspacing="" cellpadding="">
			
			<tr>
				<td><input type="checkbox" name="c" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="c" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="c" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="c" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>

全选

<button type="button" onclick="qx()">全选</button>
function qx(){
				var cs=document.getElementsByName('c');
				for(var i=0;i<cs.length;i++){
					cs[i].checked=true;
				}
			}

全不选

<button type="button" onclick="qbx()">全不选</button>
function qbx(){
				var cs=document.getElementsByName('c');
				for(var i=0;i<cs.length;i++){
					cs[i].checked=false;
				}
			}

反选

<button type="button" onclick="fx()">反选</button>
function fx(){
				var cs=document.getElementsByName('c');
				for(var i=0;i<cs.length;i++){
					if(cs[i].checked){
						cs[i].checked=false
					}else{
						cs[i].checked=true
					}
				}
			}