<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JS </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 得到页面所有的复选框集合 */
var chbs = document.getElementsByName("chbtest");
/* 实现全选全不选反选 */
function checkAll() {
for(var i = 0; i < chbs.length; i++) {
chbs[i].checked = document.getElementById("chball").checked;
}
}
/* 选择子项时判断所有的子项是否已经选中,是的话将"全选复选框"选中;否则将全选取消 */
function check(chbox) {
var isCheckAll = true;
for(var i = 0; i < chbs.length; i++) {
if(chbs[i].checked == false) {
isCheckAll = false;
}
}
document.getElementById("chball").checked = isCheckAll;
}
//-->
</SCRIPT>
<style tyle="text/css">
.{
font-size:12px;
}
</style>
<BODY>
<span>
实现全选全不选反选<br />
并且,如果是在全选状态下将子复选框的选中取消,<br />
那么全选复选框自动取消全选<br />
如果全选复选框没有选中而子复选框全部被选中,<br />
那么全选复选框自动选中全选<br />
</span>
<FORM METHOD=POST ACTION="" name="myform">
<INPUT TYPE="checkbox" NAME="chball" id="chball" value="-1" onclick="checkAll()">全选<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="1" onclick="check(this)">1<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="2" onclick="check(this)">2<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="3" onclick="check(this)">3<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="4" onclick="check(this)">4<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="5" onclick="check(this)">5<br />
</FORM>
</BODY>
</HTML>
JS实现复选框全选全不选以及子复选框带动全选框的选中
5星 · 超过95%的资源 需积分: 47 87 浏览量
2011-04-26
10:48:27
上传
评论 5
收藏 987B ZIP 举报
梦魇秦歌
- 粉丝: 5
- 资源: 52
最新资源
- 基于opencv的dnn模块实现Yolo-Fastest的目标检测python源码+模型+说明(高分项目).zip
- 使用Python调用微信本地ocr服务.zip
- 【精品推荐】人工智能在医疗中的应用.pptx
- 【精品推荐】电子医疗仪器人机接口-(1).ppt
- 【精品推荐】电子医疗仪器人机接口.ppt
- ubuntu镜像ubuntu镜像01
- 基于paddle搭建神经网络实现5种水果识别分类python源码+数据集(高分毕设).zip
- 【精品推荐】电子商务网店类型介绍.ppt
- 基于paddle搭建神经网络实现水果识别分类python源码+数据集(高分项目).zip
- 三菱plc编程口通信学习笔记.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
前往页