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" ...
随机推荐
- Linux的kickstart安装详解
Linux的kickstart安装详解 一.什么是kickstart? kickstart安装是redhat开创的按照你设计好的方式全自动安装系统的方式.安装方式可以分为光盘.硬盘.和网络.此文将以网 ...
- Hbase-1.1.1-java API
1.工具类 package com.lixin.stuty.hbase; import java.io.IOException; import org.apache.commons.configura ...
- spring4-2-bean配置-11-基于注解
- ceph之osd
一.删除osd ceph osd out 1ceph osd down 1systemctl stop ceph-osd@1ceph osd crush remove osd.1ceph osd rm ...
- vscode填坑之旅: vscode设置中文，设置中文不成功问题
刚安装好的vscode界面显示中文,如何设置中文呢? 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文,在网上找了参考了,以下教程真实 ...
- 云存储上传控件更新日志-Xproer.cloud2
官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/cloud2/index.asp 在线演示:http://www.ncmem.c ...
- Leaflet入门：添加点线面并导入GeoJSON数据|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File
Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...
- 洛谷P1501 [国家集训队]Tree II（打标记lct）
题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...
- jmeter- 性能测试3：聚合报告（Aggregate Report ）
jmeter-监听器-聚合报告样例: 字段说明: label:请求名称,自己定义的 #Samples:这次测试中一共发出了多少个请求,如果模拟20个用户,每个用户迭代20次,那么就是400(未设置持续 ...
- [Postgres]Postgres单用户模式执行VACUUM
# su - postgres $ /usr/local/pgsql/bin/postgres --single -D /usr/local/pgsql/data [不能VACUUM的数据库] Pos ...