js实现checkbox全选，全部选和反选效果
效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
select{
margin-left: 100px;
}
</style>
</head>
<body>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<button type="button" onclick="selectAll()">全选</button>
<button type="button" onclick="unSelectAll()">全不选</button>
<button type="button" onclick="converSelectAll()">反选</button>
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
function selectAll(){
for(var i = 0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
function unSelectAll(){
for(var i = 0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
function converSelectAll(){
for(var i = 0;i<inputs.length;i++){
if(inputs[i].checked){
inputs[i].checked = false;
}else{
inputs[i].checked = true;
}
}
} </script>
</body>
</html>
js实现checkbox全选，全部选和反选效果的更多相关文章
- js实现checkbox全选与反选
<script type="text/javascript" language="javascript"> function checkAll(id ...
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- js解决checkbox全选和反选的问题
function SelectAll() { var checkboxs=document.getElementsByName("chk_list"); for (var i=0; ...
- js实现CheckBox全选或者不全选
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...
- JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...
- 初学者 的 js 关于checkbox全选的问题
<script type="text/javascript" language="javascript" > function ff() { var ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- js实现checkbox的全选和全不选功能
html代码: <form name="form1" method="post" action="manage.php?act=sub" ...
随机推荐
- 虚拟化技术：Xen与KVM的对比
作为开源的虚拟化技术,对比Xen和KVM可以看到,Xen以6个无与伦比的优势领先:更好的可用资源.平台支持.可管理性.实施.动态迁移和性能基准. 可用资源:Xen的问世要比KVM早4年之久(两者分别是 ...
- 花了好几个小时的奇葩Mat为0问题
问题 1. Mat mserMat = adaptive_image_from_points(contour, rect); CCharacter character; character.setCh ...
- 洛谷 P3112 [USACO14DEC]后卫马克Guard Mark
题目描述 Farmer John and his herd are playing frisbee. Bessie throws the frisbee down the field, but it' ...
- atom插件记录
├── Zen@0.16.4 写作的时候用,很给力 ├── atom-beautify@0.29.9 美化一切代码 ├── autocomplete-paths@1.0.2 路径自动提示 ├── au ...
- 【转载】Zookeeper 安装和配置
[转载原文链接 ] Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. 单机模式 点击这里下载zookeeper的安装包之后, 解压到合适目 ...
- java Calender类
1.Calender和Date相互转化 public static void main(String[] args) { // TODO Auto-generated method stub Cale ...
- java中Integer常量池
我们先看一个关于Integer的例子 public static void main(String[] args) { // TeODO Auto-generated method stu Integ ...
- 关于Javascript 那些事
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为 ...
- Intel GPA果然是神器
又一次PERF暗黑三...只有GPA帮到了我. Intel GPA是一个用于测试产品性能和质量的工具.使用这个工具可以运行在游戏或3D应用程序中用来看看它们是如何工作的,其优势性的一点是,有了Auto ...
- 我的Linux主机操作记录续
6.安装部署node.js环境 (1)node.js的使用的项目构建工具GYP(Generate Your Project)是基于Python2.7的,所以需要安装Python2.7环境 一般自带有此 ...