表单Checkbox全选反选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>请输入关键词</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" class="ipt">歌曲1<br>
<input type="checkbox" class="ipt">歌曲2<br>
<input type="checkbox" class="ipt">歌曲3<br>
<input type="checkbox" class="ipt">歌曲4<br>
<input type="checkbox" class="ipt">歌曲5<br>
<input type="button" class="btn1" value="全选">
<input type="button" class="btn2" value="全不选">
<input type="button" class="btn3" value="反选">
<script type="text/javascript">
$(function(){
$(".btn1").click(function(){
$("input:checkbox").attr("checked",true);
});
$(".btn2").click(function(){
$("input:checkbox").attr("checked",false);
});
$(".btn3").click(function(){
$("input:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
});
})
</script>
</body>
</html>
javascript实现全选、全不选、反选.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反选</title>
<script type="text/javascript"> //提示: 事件需要加给 #checkedAll_2, 获取 name=items 的 checkbox 数组
//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
//若没有被选择, 则 name=items 的 checkbox 都要取消选择
//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
//checked = false 取消选择. //还需要给每个 name=items 的 checkbox 加响应函数
//判断 name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
//若都被选择: 则使 #checkedAll_2 被选择
window.onload=function(){
//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.
document.getElementById("checkedAll_2").onclick=function(){
var flag=this.checked;
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].checked=flag;
}
}
//给每个item添加事件
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//记录有多少个items被选中了
var number=0;
for(var j=0;j<items.length;j++){
if(items[j].checked){
number++;
}
}
document.getElementById("checkedAll_2").checked=(items.length==number);
}
}
//全选
document.getElementById("CheckedAll").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = true;
}
}
//全不选
document.getElementById("CheckedNo").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = false;
}
}
//反选
document.getElementById("CheckedRev").onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = !items[i].checked;
}
}
//提交
document.getElementById("send").onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items"m value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球<br/>
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
</body>
</html>
表单Checkbox全选反选全不选的更多相关文章
- js实现表单checkbox的单选，全选
全选&单选 //<input type="checkbox" name="" class="quan" value=" ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- checkbook全选/反选/全不选
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- vue实现单选多选反选全选全不选
单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...
- 表单美化-原生javascript和jQuery多选按钮（兼容IE6）
前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...
- [Swift通天遁地]二、表格表单-(10)快速添加日期选择/多选/动作表单/地图等自定义表单
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- WPF DataGrid CheckBox 多选 反选 全选
效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...
- html js 全选 反选 全不选源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- JavaScript--我发现，原来你是这样的JS：函数表达式和闭包
一.介绍 本次博客主要介绍函数表达式的内容,主要是闭包. 二.函数表达式 定义函数的两种方式:一个是函数声明,另一个就是函数表达式. //1.函数声明写法 function fn2(){ consol ...
- Django学习（2）数据宝库
数据库是一所大宝库,藏着各种宝贝.一个没有数据库的网站,功能有限.在Django中,支持的数据库有以下四种: SQLite3 MySQL PostgreSQL Oracle 其中SQLite3为Dja ...
- 十大经典排序算法的JS版
前言 个人博客:Damonare的个人博客 如遇到问题或有更好的优化方法,可以: 提issue给我 或是pull requests 我都会看到并处理,欢迎Star. 这世界上总存在着那么一些看似相似但 ...
- java 之 组合模式（大话设计模式）
代码是一门艺术,每次看完大话设计模式后都会有新的认识,有时会感叹原来还可以这样玩,相信大家都用过递归,递归的使用一般遍历文件夹等会常用到, 今天讲的设计模式类似于递归,也比较神奇,先看下类图,稍后再帮 ...
- 树的平衡 AVL Tree
本篇随笔主要从以下三个方面介绍树的平衡: 1):BST不平衡问题 2):BST 旋转 3):AVL Tree 一:BST不平衡问题的解析 之前有提过普通BST的一些一些缺点,例如BST的高度是介于lg ...
- Redis的简单使用和介绍
1.什么是NoSQL NoSQL = Not Only SQL 非关系型的数据库 2. 为什么需要NoSQL High performance 高并发读写 ...
- Cs Round#54 E Late Edges
题意:给定一个无向图,你从结点1开始走,每经过一条边需要1的时间,每条边都有一个开放时间,只有当目前所用的时间大于等于开放时间时,这条边才可以被经过.每一单位时间你都必须经过一条边,问最快什么时候可以 ...
- C++ size_t 和size_type的区别
为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned size_t是全局定义的类型:size_type是STL类中定义的类型属性,用 ...
- javascript实时保存时出现改动多条记录的bug
文章实现编辑,编辑页面是右側弹出层,当有改动时就保存,对文章标题title加入改变change事件,有改变时就保存文章(saveArticle) $("#title").chang ...
- 第03章-VTK系统概述（1）
[译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...