js实现全选、全不选、反选的功能
<!DOCTYPE html>
<html>
<head>
<META charset="utf-8"/>
<link rel="stylesheet" href="table.css"/>
<style> </style>
</head>
<body>
爱好：<br/>
读书：<input type="checkbox" name="hobby" value="0"/><br/>
游泳：<input type="checkbox" name="hobby" value="1"/><br/>
听歌：<input type="checkbox" name="hobby" value="2"/><br/>
<hr/>
<button value="1" onclick="setAll()">全选</button>
<button value="0" onclick="setNo()">全不选</button>
<button value="-1" onclick="setOthers()" >反选</button>
</body>
<script src="util.js"></script>
<script>
/*
//全选函数
function setAll() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
} //全不选函数
function setNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
} //反选
function setOthers() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked == false)
hobbies[i].checked = true;
else
hobbies[i].checked = false;
}
} */
var inputs=$('input[name=hobby]');
var btns=$('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
var value=this.getAttribute('value');
for(var i=0;i<inputs.length;i++){
if(value==1){
inputs[i].checked=true;
}else if(value==0){
inputs[i].checked=false;
}else{
inputs[i].checked=false;
}
}
}
} </script>
</html>
util.js
function $(n){
if(/^<([a-zA-Z]+)>$/.test(n)){
var tagName = RegExp.$1;
return document.createElement(tagName);
}else{
return document.querySelectorAll(n);
}
}
js实现全选、全不选、反选的功能的更多相关文章
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- js实现全选/全不选、反选
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 用 JS（JavaScript ）实现多选、全选、反选
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- js(四) 全选/全不选和反选
思路:通过选择全选的选框的状态stuts 即true/false控制其他选框. 首先 我们要通过.checked方法获取选框(全选/全不选)的值. function all(){ var stuts= ...
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
随机推荐
- JavaScript-原型&原型链&原型继承&组合函数
小小的芝麻之旅: 今天学习了js的原型,要说原型,我们先简单说一下函数创建过程. 原型 每个函数在创建的时候js都自动添加了prototype属性,这就是函数的原型,原型就是函数的一个属性,类似一个指 ...
- antd-mobile的按需加载
"babel": { "presets": [ "react-app" ] } 主要问题是 依赖项的版本问题 以及 配置问题 新添加的con ...
- ASP.NET MVC学习笔记 第一天
MVC:Mode(模型).View(视图).Controller(控制器) 在服务器接收到请求(Request)时,路由(Routing)定义了应该调用的控制器,以及应该调用的控制器动 ...
- 关于eclipse连接外置android模拟器
1.win+R,输入cmd,打开命令提示符 2.cd D:\Java(安卓应用开发)\adt-bundle-windows-64\sdk\platform-toolsadb connect 127.0 ...
- [转]实现Hive数据同步更新的shell脚本
引言: 上一篇文章<Sqoop1.4.4 实现将 Oracle10g 中的增量数据导入 Hive0.13.1 ,并更新Hive中的主表>http://www.linuxidc.com/Li ...
- Java学习---JDK的安装和配置
控制面板\系统和安全\系统 CLASSPATH %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; JAVA_HOME C:\Program Files ...
- C++通过Callback向C#传递数据
现在比较流行C#与C++融合:C#做GUI,开发效率高,C++做运算,运行效率高,二者兼得. 但是C++与C#必然存在数据交互,C#与C++dll的数据交互从来都是一个让人头疼的问题. 从调用方式看也 ...
- ZT 打工者买彩票中1000万 5年后变逃犯身上剩80元
打工者买彩票中1000万 5年后变逃犯身上剩80元 2014-01-07 08:22 来源:都市快报 我有话说 挥霍—— 从800万到80元 在湖南永州零陵区富家桥镇茶叶湾村,陈某是不折不扣的名人 ...
- [EffectiveC++]item06：若不想使用编译器自动生成的函数，就该明确决绝
- Scala编译器安装
1.安装JDK 因为Scala是运行在JVM平台上的,所以安装Scala之前要安装JDK. 2.安装Scala Windows安装Scala编译器 访问Scala官网http://www.scala- ...