练习-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() ...
随机推荐
- 玩转Android---事件监听篇---第2篇
事件监听篇---第二篇 下面是各种常用控件的事件监听的使用 ①EditText(编辑框)的事件监听---OnKeyListener ②RadioGroup.RadioButton(单选按钮)的事件监听 ...
- （二）Activity启动模式
一.标准模式(standrard) 1.当新建一个Activity时,默认情况下就是标准模式,也可以通过AndroidManifest文件显示指定其launchMode为standard <?x ...
- L9-2.安装mysql数据库
二.安装mysql 1.检查是否安装了mysql 2.安装cmake 输入gmake: make install 安装依赖的软件包: 新建用户权限等: 解压 安装 安装: 安装成功. 安装后调整: v ...
- linux系统下memcached启动正常但程序无法连接的问题解决
在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPo ...
- ubuntu mysql编码设置5.5以后
安装了mysql. 版本:5.5.28 操作系统 :ubuntu 12.10 mysql> show variables like 'character%'; +---------------- ...
- JS判断是否在微信浏览器打开
if (browser.versions.mobile) {//判断是否是移动设备打开.browser代码在下面 var ua = navigator.userAgent.toLowerCase(); ...
- python--执行文件的绝对路径
1.__file__属性对应文件名. 2.os.path.realpath(__file__)这样就可以得到文件的绝对路径.
- Oracle EBS-SQL (WIP-7):检查当月任务发放记录.sql
select WE.DESCRIPTION 任务说明, DECODE(WE.S ...
- zip命令
常用示例: (1)zip -r myfile.zip ./* ----将当前目录下的所有文件和文件夹全部压缩成myfile.zip文件, -r表示递归压缩子目录下所有文件. (2)unzip - ...
- poj1004
Financial Management Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 125635 Accepted: ...