html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>html+css+js实现复选框全选与反选</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="js,笔试题目" />
<style type="text/css">
table,tr,td
{
border:1px solid red;
}
</style>
<script type="text/javascript">
function quanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
//alert(cbox.value);
if(document.getElementById("cb_quanxuan").checked)
cbox.checked=true;
else
cbox.checked=false;
}
}
function fanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
if(document.getElementById("cb_fanxuan").checked)
{//选中反选框
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
else
{
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
}
}
</script> </head>
<body>
<form id="form1">
<table>
<tr>
<td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
<td>复选框全选案例</td>
<td> </td>
<td> </td>
</tr> <tr>
<td><input type="checkbox" id="cb1" value="1" />1</td>
<td>我是傻逼1</td>
<td> </td>
<td> </td>
</tr> <tr>
<td><input type="checkbox" id="cb2" value="2" />2</td>
<td>我是傻逼2</td>
<td> </td>
<td> </td>
</tr> <tr>
<td><input type="checkbox" id="cb3" value="3" />3</td>
<td>我是傻逼3</td>
<td> </td>
<td> </td>
</tr> <tr>
<td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
<td>反选案例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
html+css+js实现复选框全选与反选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
随机推荐
- mysql数据类型——整型INT(m)
1.整形分为四种 tinyint smallint mediumint int bigint 注意: 右侧的取值范围是在未加unsigned关键字的情况下,如果加了unsigned,则最大值翻倍,如t ...
- bom type:Phantom
bom的类型 'type': fields.selection([('normal','Normal BoM'),('phantom','Sets / Phantom')], 'BoM Type', ...
- D题 - A+B for Input-Output Practice (III)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description Your ...
- C# 正则表达式、Json
正则表达式: 正则表达式主要的参考文章:http://www.cnblogs.com/stg609/archive/2009/06/03/1492709.html#anchorD. 需求:将cocos ...
- Solr4.8.0源码分析(20)之SolrCloud的Recovery策略(一)
Solr4.8.0源码分析(20)之SolrCloud的Recovery策略(一) 题记: 我们在使用SolrCloud中会经常发现会有备份的shard出现状态Recoverying,这就表明Solr ...
- 转:2014 年 15 款新评定的最佳 PHP 框架
原文来自于:http://blog.jobbole.com/59999/ 原文出处: codegeekz 译文出处:oschina 欢迎分享原创到伯乐头条 通常,框架都会被认为是帮助开发者快速 ...
- python global 全局变量
http://blog.csdn.net/mldxs/article/details/8559973 __author__ = 'dell' def func(): global x print 'x ...
- web 缓存
http://robbinfan.com/blog/38/orm-cache-sumup http://my.oschina.net/ITBoy/blog/23683 http://www.kuqin ...
- siem主流厂商
http://www.scmagazine.com/siem/products/6428/5/ http://www.edu.cn/wlaq_6572/20131217/t20131217_10532 ...
- Agri-Net poj 1258
WA了好多次,注意语言和数据范围 Description Farmer John has been elected mayor of his town! One of his campaign pro ...