【JavaScript】JavaScript中的checkbox之全选、全不选、反选

来源：互联网发布：php pdo bindvalue 编辑：程序博客网时间：2024/04/30 01:59

JavaWeb中很常见的一种功能是checkbox的选择问题。下面是功能展示图：

代码部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title></head><body><form method="post" action="">   请选择您的爱好!<br><input type="checkbox" name ="item" id="checkedAll_2"/>全选/全不选   <br/>    <input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="游泳"/>游泳<input type="checkbox" name="items" value="唱歌"/>唱歌   <br/>    <input type="button" id="CheckedAll" value="全　选"/>    <input type="button" id="CheckedNo" value="全不选"/>    <input type="button" id="CheckedRev" value="反　选"/> </form></body><script language="JavaScript">//反选//1 获得反选按钮,添加点击事件document.getElementById("CheckedRev").onclick=function(){//2 获得到要操作4个input 对象var items =  document.getElementsByName("items");//3 遍历for(var i = 0 ; i < items.length ; i++){items[i].checked = !items[i].checked;}}//全选//1 获得反选按钮,添加点击事件document.getElementById("CheckedAll").onclick=function(){//2 获得到要操作4个input 对象var items =  document.getElementsByName("items");//3 遍历for(var i = 0 ; i < items.length ; i++){items[i].checked = true;}}//全不选选//1 获得反选按钮,添加点击事件document.getElementById("CheckedNo").onclick=function(){//2 获得到要操作4个input 对象var items =  document.getElementsByName("items");//3 遍历for(var i = 0 ; i < items.length ; i++){   items[i].checked = false;}}</script></html>

1、JavaScript中的经典小例子（一）

2、JavaScript中Node节点的CURD

2 0