JavaScript实现HTML复选框全选与反选功能
作者:微光时间:2026-10-30 15:03:24浏览:342
本文介绍了如何使用JavaScript结合HTML和CSS实现复选框的全选与反选功能。通过遍历DOM元素并修改checked属性,可快速完成交互逻辑,适用于表单批量操作场景。
JavaScript实现HTML复选框全选与反选功能
本文展示了一段JavaScript代码,用于实现复选框的全选与反选功能,供读者参考。
<html>
<head>
<title>html+css+js实现复选框全选与反选</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="js,笔试题目" />
<style type="text/css">
table,tr,td
{
border:1px solid red;
}
</style>
<script type="text/javascript">
function quanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
//alert(cbox.value);
if(document.getElementById("cb_quanxuan").checked)
cbox.checked=true;
else
cbox.checked=false;;
}
}
function fanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
if(document.getElementById("cb_fanxuan").checked)
{//选中反选框
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
else
{
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
}
}
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
<td>复选框全选案例</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb1" value="1" />1</td>
<td>我是傻逼1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb2" value="2" />2</td>
<td>我是傻逼2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb3" value="3" />3</td>
<td>我是傻逼3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
<td>反选案例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
以上内容为本文的全部介绍,希望能对读者的学习有所助益,同时也感谢大家的支持。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
