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 ...
随机推荐
- Linux 添加yum命令
第一步,国内的yum仓库 http://mirrors.163.com/centos/7/os/x86_64/Packages/ http://mirrors.aliyun.com/centos/7/ ...
- 004bean作用域
1.Singleton(单例) 2.Prototype(原型)---->每次注入.通过Spring应用上下文获取,都会重新创建 @Scope(ConfigurableBeanFactory ...
- C语言——无向带权图邻接矩阵的建立
#include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...
- 开博缘由 ， 可点下看看 http://www.cnblogs.com/jshare
记录日常用中用到.遇到的问题 实现过程,仅供参考 不定时更新 ------------------- 之前看过一个文章,大概说的是开发和用到的过的代码,可以提取出一些代码片段,长时间下来,你会发现部分 ...
- 一步一步pwn路由器之路由器环境修复&&rop技术分析
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 拿到路由器的固件后,第一时间肯定是去运行目标程序,一般是web服务 ...
- c# 设计模式 之：简单工厂、工厂方法、抽象工厂之小结、区别
很多时候,我发现这三种设计模式难以区分,常常会张冠李戴闹了笑话.很有必要深入总结一下三种设计模式的特点.相同之处和不同之处. 1 本质 三个设计模式名字中都含有“工厂”二字,其含义是使用工厂(一个或一 ...
- springAOP学习笔记
目录 基础 引用 AOP方法 使用 xml配置 注解配置 基础 什么是aop? 把我们程序重复的代码抽取出来,在需要执行的时候,使用动态代理的技术,在不修改源码的 基础上,对我们的已有方法进行增强. ...
- js实现查找字符串出现最多的字符和次数
代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- Effective C++(10) 重载赋值操作符时，返回该对象的引用（retrun *this）
问题聚焦: 这个准则比较简短,但是往往就是这种细节的地方,可以提高你的代码质量. 细节决定成败,让我们一起学习这条重载赋值操作符时需要遵守的准则吧. 还是以一个例子开始: Demo // 连锁赋值 x ...
- 浅析Linux操作系统是如何工作的（思维导图）
SA***189 多任务计算机运转机制如下思维导图所示: 小结: Linux操作系统是一个在时钟的节拍下,各个模块紧密协作.密不可分的整体,而整个Linux系统都是建立在存储程序的基础之上,正是有了程 ...