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 ...
随机推荐
- Web服务器学习总结（一）：web服务器简介
一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...
- How to fix Mysql table crashes
Whenever you enconter this: Please use mysql_upgrade to fix this error. or using mysql_upgrade -u r ...
- Rxjava学习(一基础篇)
一.Rxjava跟EventBus的区别 RxJava 是一个响应式编程框架,通过一种扩展的观察者设计模式来实现异步操作. 跟AsyncTask和Handler类似,但是比AsyncTask和Hand ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- Appium元素定位（uiautomatorviewer）
一.uiautomatorviewer元素定位 1.adroid-sdk的安装目录tools下有1个自带的工具uiautomatorviewer,打开后,如下所示: 点击后,如图所示: 步骤: a.链 ...
- 关于App的cpu/内存/流量 /电量的方法（GT工具）
https://mp.weixin.qq.com/s?__biz=MzUzNTQxMzMzMg==&mid=2247484376&idx=1&sn=651e9cf22801b5 ...
- Week2——提交表单后后台的工作
在我理解看来,发生请求后主要是通过域进行相互间的协调作用的.表单数据可以从request域中获得,也可以通过response域返回数据给前台. 当发起http请求后,已经启动的Tomcat服务器解析收 ...
- 路飞学城知识点4之Django contenttypes 应用
Django contenttypes 应用 contenttypes 是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中. 每当我们创建 ...
- java笔记--ASCII编码认知和转换
ASCII是基于拉丁字母的一套电脑编码系统,主要用于显示英语字符是当今最通用的单字节编码.包括128个字符. --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs. ...
- awk 正则表达式、正则运算符详细介绍
前言:使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具 ...