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" ...
随机推荐
- cs api测试
更新磁盘方案 http://192.168.150.16:8900/client/api?command=updateDiskOffering&id=199e3be4-2af1-47a3-9f ...
- (转)Android SDK Manager国内无法更新的解决方案
转载地址:http://www.linuxidc.com/Linux/2015-01/111958.htm 现在由于GWF,google基本和咱们说咱见了,就给现在在做Android 或者想学习An ...
- p4364 [九省联考2018]IIIDX
传送门 分析 我们先考虑如果所有数都不相同我们应该怎么办 我们可以直接贪心的在每个点放可行的最大权值 但是题目要求可以有相同的数 我们可以考虑每次让当前节点可发且尽量大的同时给兄弟节点留的数尽量大 我 ...
- csv乱码
可能:iconv转码导致,本身已经是GBK,又进行了GBK转码
- cannot find -lf2c
sudo apt-get install libf2c2 auso apt-get install libf2c2-dev
- Insufficient free space for journal files
前两天请假了,公司的很多app突然挂掉了,说是mongodb莫名的挂掉了,赶紧进去看了看日志: --31T14:: [initandlisten] ERROR: Insufficient free s ...
- pagespeed模块安装——Nginx、Tengine
1.安装好nginx或者tengine 2.下载pagespeed模块并且解压 sudo mkdir -p /usr/local/tengine/modules wget https://github ...
- Jquery 欲绑定事件
有时候,想提前给即将添加的的元素绑定事件,这时候使用on就不行了,利用事件的冒泡机制可以完成这个功能 Jquery 提供了delegate方法就是这样实现的. $("#schemaaccor ...
- Tomcat安装JPress
上线代码有两种方式,第一种方式是直接将程序目录放在webapps目录下面,这种方式大家已经明白了,就不多说了.第二种方式是使用开发工具将程序打包成war包,然后上传到webapps目录下面.下面让我们 ...
- SQL2008中sa账户无法登陆问题
实验需要用Java与SQL Server连接,因为使用的 SQL 2008 Express Edition 是基于 Visual Studio2010 安装包安装时一起安装的,所以为了方便数据库的操作 ...