<!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实现全选、全不选、反选的功能的更多相关文章

  1. jquery实现全选,取消,反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  3. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. 用 JS(JavaScript )实现多选、全选、反选

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. js(四) 全选/全不选和反选

    思路:通过选择全选的选框的状态stuts 即true/false控制其他选框. 首先 我们要通过.checked方法获取选框(全选/全不选)的值. function all(){ var stuts= ...

  7. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  8. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  10. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

随机推荐

  1. java中的>>>和>>>=

    “>>>”运算符所作的是无符号的位移处理,它不会将所处理的值的最高位视为正负符号,所以作位移处理时,会直接在空出的高位填入0.当我们要作位移的原始值并非代表数值时(例如:表示颜色图素 ...

  2. java简单数组定义

    public class Shuzu { static int[] array = new int[] { 32, 2, 2, 5, 45, }; int[] array1[] = new int[1 ...

  3. Vue.js学习(常用指令)

    Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...

  4. CentOS6.5(1)----设置静态IP并禁用IPV6

    使用vim命令编辑 /etc/sysconfig/network-scripts/ifcfg-eth0 文件 vim /etc/sysconfig/network-scripts/ifcfg-eth0 ...

  5. Hadoop & Spark & Hive & HBase

    Hadoop: http://hadoop.apache.org/docs/r2.6.4/hadoop-project-dist/hadoop-common/SingleCluster.html bi ...

  6. AndroidStudio中logcat不输出信息

    2017年11月27日,记住这个日子.今天第一次感觉到被批评了,由于自己技术知识储备不足导致今天的外出工作等于浪费时间.正式因为这个logcat不输出信息的问题,前几回不输出信息了我就从新启动了开发工 ...

  7. 从golang-gin-realworld-example-app项目学写httpapi (四)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/routers.go 路由定义 pa ...

  8. 如何清除SQL 的登录名

    复制路径 找到SqlStudio.bin 文件删除即可 SQL Server 2016 版本: C:\Users\%username%\AppData\Roaming\Microsoft\SQL Se ...

  9. 细嚼慢咽C++primer(5)——顺序容器

    1 顺序容器的定义 容器是容纳特定类型对象的集合. 顺序容器:将单一类型元素聚集起来成为容器,然后根据位置来存储和访问这些元素,这就是顺序容器. 标准库的三种顺序容器类型:vector, list 和 ...

  10. Python学习---django之ORM语法[对象关系映射]180124

    ORM语法[对象关系映射] ORM: 用面向对象的方式去操作数据库的创建表以及增删改查等操作. 优点:1 ORM使得我们的通用数据库交互变得简单易行,而且完全不用考虑该死的SQL语句.快速开发. 2 ...