js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消。全选后点击某个子选框,全选也能取消。当四个子选框都选中时,全选框也被选择。
实现代码:
<script>
var a=document.getElementById("a");
var b=document.getElementsByClassName("b");
//全选与取消全选
var y=true;
a.onchange=function(){ if(a.checked){
for (var i=0;i<b.length;i++)
b[i].checked = true;
}else{
for (var i=0;i<b.length;i++) {
b[i].checked =false; };
}; };
//子选框选择判定全选选框(第一种实现方法)
for (var i=0;i<b.length;i++) {
b[i].onchange=function(){
a.checked = true;
for (var i=0;i<b.length;i++) {
if (!b[i].checked) {
a.checked=false;
break;
} } }
} //子选框选择判定全选(第二种实现方法) // var n = 0;
// for (var i=0;i<b.length;i++) {
// b[i].onchange=function(){
// n = 0;
// for(var i = 0; i < b.length; i++)
// {
// if(b[i].checked==true){
// n++;
// }
// if(n>=4){
// alert(n);
// a.checked = true;
// } else{
// a.checked = false;
// }
//
// }
// }
//}
js 全选选框与取消全选代码的更多相关文章
- 点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...
- Android开发CheckBox控件,全选,反选,取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...
- JavaScript实现单击全选 ,再次点击取消全选
以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...
- js弹出确认框,挺全
一种: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.google.com'">弹 ...
- js select下拉框下拉跳转代码
下拉跳转原理很简单这个用到了select的onchangeg事件,只要这里改变我们就获取select值直接location.href=this.value即可. <select name=&qu ...
- JS或jQuery实现一组复选框的全选和取消全选?
//1.JS方式实现:checkbox 全选/取消全选 var isCheckAll = false; function swapCheck() { if (isCheckAll) { ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- 前端之 JS 实现全选、反选、取消选中
需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
随机推荐
- npm和gulp学习
npm的使用 node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一种JavaScript语言运行平台,和浏览器这个运行平台是同一个概念. npm np ...
- Flask - 模板语言jinja2 和render_template高级用法
目录 Flask - 模板语言jinja2 和render_template高级用法 一. 字典传递至前端 二. 列表传入前端Jinja2 模板的操作: 三. 大字典传入前端 Jinja2 模板 四. ...
- Python 1 初识python
1.Python介绍 Python是一种高级语言,与JAVA C# 等同.可以编写各种应用程序,每种语言都有其合适的应用场景.而Python 的优势在于更加人性化.简便的语法规则,以及针对各种具体场景 ...
- ggplot画图笔记
1.数据集相加符号 %+% 2.图形属性映射 aesc()函数 aes(x=mpg,y=wt) 把mpg属性映射为x,wt属性映射为y 图层图形属性可以添加.修改和删除映射. 如 3.位置调整参数 ...
- Openfire:访问Servlet时绕开Openfire的身份验证
假设有如下的场景,当我们开发一个允许Servlet访问的OF插件时,如果不需要身份验证的话,或者有其它的安全机制的话,我们会不希望每次都做一次OF的身份验证,而是能够直接访问Servlet.绕开身份验 ...
- 新随笔(三)什么时候使用button,什么时候使用文字链接
新随笔(三)什么时候使用button.什么时候使用文字链接 你为什么在这个地方用button而不用文字链接呢? 这是刚才我问一个设计师的问题. 她抬头看我,眼神迷茫.说:"没什么为什么呀,我 ...
- HDU 2110-Crisis of HDU(母函数)
Crisis of HDU Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- Codeforces Round #277 (Div. 2)A. Calculating Function 水
A. Calculating Function For a positive integer n let's define a function f: f(n) = - 1 + 2 - 3 + ...
- UESTC--758--P酱的冒险旅途(模拟)
P酱的冒险旅途 Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Submit Status ...
- poj2594——最小路径覆盖
Description Have you ever read any book about treasure exploration? Have you ever see any film about ...