练习-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() ...
随机推荐
- 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- Oracle利用过程procedure块实现银行转账
-- create table account( id ) not null, name ), ,2), constraint a_pk primary key(id) ); --历史表 select ...
- HTML 5 JavaScript初步 编译运行.doc
编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...
- Qt中实现菜单和工具栏功能
Qt创建菜单和工具栏: 一. temp.h文件的内容 1.定义类temp继承QMainWindow 2.添加Q_OBJECT , 构造函数 . 析构函数等内容 3.$重点内容 3.1定义QActio ...
- Bitmap、BitmapDrawable、BitmapFactory、Matrix类之间的关系
1.BitmapFactory是一个工具类 Bitmap实现在android.graphics包中.但是Bitmap类的构造函数是私有的,外面并不能实例化,只能是通过JNI实例化.这必然是 某个辅助类 ...
- php实现多表(四表)连接
<?php include_once "DBHelper.php"; define('HOST', '127.0.0.1'); define('USER', 'root'); ...
- 初学swift笔记字典、数组(四)
import Foundation //字典 元素顺序是无序的 //1.字典元素是键值对 (key:value) //key 一定是可哈希的 string\int\bool var dic1=[&qu ...
- 论山寨手机与Android联姻 【5】MTK颠覆手机产业链
MTK一站式解决方案(Turn-Key)模式出现以前,手机设计开发流程大约可以分成以下6步. 第1步,Design House从芯片厂商那里拿到参考设计. 芯片厂商根据自己的市场部门对手机市场的预测, ...
- android:TextAppearance.Material.Widget.Button.Inverse问题
如果在刚够构建Android Studio项目的时候,运行发现,出现没找到资源的错误!找不到com.android.support/appcompat-v7/23.0.1/res/values-v23 ...
- SRM 581 D2 L3:TreeUnionDiv2,Floyd算法
题目来源:http://community.topcoder.com//stat?c=problem_statement&pm=12587&rd=15501 这道题目开始以为是要在无向 ...