表单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/ ...
随机推荐
- 2016普及组t3海港
好的,说说这道题的思路,爆搜队列嘛: 用一个结构体队列存每个人来的时间和他的国籍,用一个vis数组存每个人来的次数,是第一次来sum便加一. 然后从前面第一个人开始扔(原谅我用这个词,因为我找不到更好 ...
- Tosska SQL Tuning Expert 工具优化SQL语句
对于SQL开发人员和DBA来说,根据业务需求写出一条正确的SQL很容易.但是SQL的执行性能怎么样呢?能优化一下跑得更快吗?如果不是资深的DBA,估计很多人都没有信心. 幸运的是,自动化优化工具可以帮 ...
- (转)Python 日期和时间
转自http://www.runoob.com/python/python-date-time.html Python 日期和时间 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见 ...
- SQL-Oracle内实现柱形图式的效果
在SQL SERVER内有一个函数replicate()可以实现柱形图效果,本质上是利用字符重复出现的次数来控制柱形图的长短,效果如图: 如果要在Oracle内实现相同的效果,则需要自己写一个函数: ...
- db2服务器端授权
昨天吃饭回来有点晚,没有及时写,今天补上. db2服务器端安装就不说了,网上很多.今天具体说说授权吧.这是个麻烦事. 安装的时候会让你创建数据库.你就根据提 ...
- javaweb学习总结(四)——Http协议（转）
转载自 http://www.cnblogs.com/xdp-gacl/p/3751277.html 一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传 ...
- linux命令的排列、替换与别名
命令的排列; 1.使用";" 命令语法: 命令1;命令2 当运行该命令时,无论命令1是否出错.接下来就运行命令2 2.使用"&&" 命令语法:命 ...
- 十四、Spring Boot 日志记录 SLF4J
在开发中打印内容,使用 System.out.println() 和 Log4j 应当是人人皆知的方法了. 其实在开发中我们不建议使用 System.out 因为大量的使用 System.out 会增 ...
- Jsp制作验证码
验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart&qu ...
- 自学Zabbix3.8.1.2-可视化Visualisation-Graphs自定义图表
自学Zabbix3.8.1.2-可视化Visualisation-Graphs自定义图表 自定义图表,如名称所示,提供定制功能.虽然简单的图形可以很好地查看单个项目的数据,但是它们不提供配置功能.因此 ...