练习-checkbox 全选 ，反选， 单选，以及取值
1.方法1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript> function unselectall(){
if(document.myform.chkAll.checked){
document.myform.chkAll.checked = document.myform.chkAll.checked&0;
}
}
function CheckAll(form){
for (var i=0;i<form.elements.length;i++){
var e = form.elements[i];
if (e.Name != 'chkAll'&&e.disabled==false)
e.checked = form.chkAll.checked;
}
}
</script> 在网页中html中的代码: <form name="myform" method="post" id="myform" action="" > <input name='id' type='checkbox' onclick='unselectall()' id='id' value='1'> 设计家园 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='2'> 网页教程 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='3'> 酷站欣赏 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='4'> 网页素材 <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'>
全选 </form> </body>
</html>
2.方法2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
} // --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
} // --反选被单击---
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
</script>
</head> <body>
<form name="form1" method="post" action="">
<table width="500" border="1">
<tr bgcolor="#FFFF66">
<td>
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>
<td align="center">复选框全选示例 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>
<td> 作用： </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>
<td> a.单击列头复选框全选或全不选子项 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>
<td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>
<td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td>
<td>d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#66FFFF">
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
<td align="center">反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
3.取值
var num=0;
var value=[];
var c=document.getElementsByTagName("INPUT");
for(var i=0;i<c.length;i++){
if(c[i].type=="checkbox"&&c[i].checked)
{
num++;
value[value.length]=c[i].value;
}
}
alert("共有"+num+"个复选框被选中,值为"+value);
练习-checkbox 全选 ，反选， 单选，以及取值的更多相关文章
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- ----Juquery复选框全选反选及获取选中值Value
--获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...
- checkbox 全选反选实现全代码
//跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery学习笔记（4）--checkbox全选反选
可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中. <!DOCTYPE html> <html lang="en"> <h ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
随机推荐
- php预定义常量&变量
PHP中可以使用预定义常量获取PHP中的信息,常用的预定义常量如下表所示. 常量名 功能 _FILE_ 默认常量,PHP程序文件名 _LINE_ 默认常量,PHP程序行数 PHP_VERSION ...
- UVA 1601 The Morning after Halloween
题意: 给出一个最大为16×16的迷宫图和至多3个ghost的起始位置和目标位置,求最少经过几轮移动可以使三个ghost都到达目标位置.每轮移动中,每个ghost可以走一步,也可以原地不动,需要注意的 ...
- IQueryable与IEnumberable的区别(转)
转自 http://www.cnblogs.com/fly_dragon/archive/2011/02/21/1959933.html IEnumerable接口 公开枚举器,该枚举器支持在指定类型 ...
- ZOJ 1530 - Find The Multiple
Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...
- Mvc Webapi+Fiddler调试 （WebAPI 一）
Fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js, ...
- 自定义alert，confirm，prompt事件，模仿window.alert()，confirm()，prompt()
css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...
- 在Google map图上做标记，并把标记相连接
<!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name ...
- 前端开发面试题收集 JS
前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...
- Preorder, Inorder, and Postorder非递归总结
Preorder, Inorder, and Postorder Iteratively Summarization[1] 1.Pre Order Traverse public List<In ...
- Oracle EBS-SQL (WIP-11):检查期间任务完工记录数.sql
select WE.WIP_ENTITY_NAME 任务名称, WDJ.class_code ...