表单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选项卡是一个常用的实现.这里我们将用原生js来将其给予实现. 首先html代码: <div id="container"> <input type=" ...
- 用python的requests第三方模块抓取王者荣耀所有英雄的皮肤
本文使用python的第三方模块requests爬取王者荣耀所有英雄的图片,并将图片按每个英雄为一个目录存入文件夹中,方便用作桌面壁纸 下面时具体的代码,已通过python3.6测试,可以成功运行: ...
- 【下一代核心技术DevOps】：（五）微服务CI与Rancher持续集成
1. 引言 DevOps的核心魅力是快速的持续集成交付,降低研发和实施运维之间的交互,使得传统的各种扯皮现象统统消失.最重要的是降低成本 保障产品交付可靠性. 使用Rancher作为持续集成的关键环节 ...
- Common Data Service (CDS) 初探
作者:陈希章 发表于 2017年12月16日 前言 Common Data Service(以下简称为CDS),通用数据服务是一个创新性的基础功能,这是微软试图打造一个全新的基于SaaS模式的数据服务 ...
- 单点登录（SSO）的设计
一.前言 什么是SSO? SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...
- 如何设置html中img宽高相同-css
最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...
- VisualStudio程序运行后控制台窗口一闪就没了
这个虽然是千查万查出来的,但也不是原创的.希望对大家有所帮助. 方案一:网上最常见的解决方案是,在程序结尾的 return 0; 之前加 system("pause") 或 get ...
- JAVA设计模式之：命令模式
*通常情况下:行为请求者与实现者通常呈现一种高度耦合状态.有时要对行为进行变更处理处理.高度耦合方式就显得不合适. * 将行为请求者与行为实现者解耦,将一组行为抽象为对象.实现二者之间的松耦合. 这就 ...
- 简单了解Markdown
在Github的readme.md文件的编辑中,開始渐渐的接触Markdown.如今简单系统叙述一下Markdown的语法. Markdown是一种能够使用普通文本编辑器编写的标记语言.通过类似HTM ...
- [hdu 4869](14年多校I题)Turn the pokers 找规律+拓欧逆元
Turn the pokers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...