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" ...
随机推荐
- SUSE制作ISO源
These commands have been tested on openSUSE 11. First create a directory where you will store your I ...
- windows 查看端口被占用进程
查看占用63243是谁 C:\Users\Administrator>netstat -aon|findstr "63243" TCP 172.27.33.11:63243 ...
- WebSocket 教程（转载）
WebSocket 教程 作者: 阮一峰 日期: 2017年5月15日 WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebSocket 协议的使用方法. 一.为什么需 ...
- 面向对象的JavaScript-007-Function.prototype.bind() 的4种作用
1. // Function.prototype.bind() 的作用 // 1.Creating a bound function this.x = 9; var module = { x: 81, ...
- spring.net事件的注入
.c#代码 TestObject source = new TestObject(); TestEventHandler eventListener1 = new TestEventHandler() ...
- Source Insight： has been changed outside of Source Insight
has been changed outside of Source Insight 2018年04月26日 09:41:01 linux_c_coding_man 阅读数:247 摘自:https: ...
- Excel数据透视表
Excel中每列是一个字段,每行是一条记录. 值字段设置,双击更改统计方法. 双击透视表中的数据可以看具体是哪些记录贡献的这些数据. 显示报表筛选页,生成多个工作簿.
- [GO]用go语言实现区块链工作原理
基本原理这里就不写了,只写一个简单demo的实现 首先得有一个区块用来存储区块头和区块体 type Block struct { Version int64 PreBlockHash []byte H ...
- WordPaster2项目变化
1.1.1. jsp 1.引入json2.min.js 2.控件名称改为WordPasterManager 3.文件保存逻辑更新,直接使用控件生成的文件名称 1.1.2. asp.net 1.引入js ...
- 大型Unity手游《英雄之刃-最后之战》源码分析
英雄之刃之最后一战是国内首款原创精品MOBA手游,是一款由前暴雪文案亲自操刀世界观,日韩专业团队打造美术场景,新加坡团队精心制作战斗音乐的旷世之作! 超快速的匹配对战.默契的团队协作给你带来意犹未尽的 ...