全选练习-原生版和jQuery
今天来做一些练习，做全选练习
原生版的实现：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> </style>
</head>
<script type="text/javascript">
window.onload = function(){
var items = document.getElementsByName("items"); var checkedAllBox = document.getElementById("checkedAllBox");
//全选
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){ for(var i = 0; i<items.length;i++){
items[i].checked = true;
}
//更新全选和全不选
checkedAllBox.checked = true;
}
//全不选
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0; i<items.length;i++){
items[i].checked = false;
}
//更新全选和全不选
checkedAllBox.checked = false;
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){ for(var i = 0; i<items.length;i++){
items[i].checked = !items[i].checked;
if (!items[i].checked) {
checkedAllBox.checked = false;
}
}
}
//提交
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0; i<items.length;i++){
if(items[i].checked){
alert(items[i].value)
}
}
}
//通过点击全选和全不选，items也选中
checkedAllBox.onclick = function(){
for(var i =0;i<items.length;i++){
items[i].checked = this.checked;
}
}
//通过点击items，如果有全选则全选、全不选也出现
for (var i = 0; i < items.length; i++) {
items[i].onclick = function(){
checkedAllBox.checked = true; for(var j =0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked = false;
break
}
}
}
}
}
</script> <body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body> </html>
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$(function(){
var $items = $(":checkbox[name='items']");
var $checkedAllBox = $("#checkedAllBox");
//1. 点击'全选': 选中所有爱好
$("#checkedAllBtn").click(function(){
//$items.each(function(){
//this.checked = true;
//})
////全选/全不选选项
//$checkedAllBox[0].checked = true;
$items.prop("checked",true);
$checkedAllBox.prop("checked",true);
});
//2. 点击'全不选': 所有爱好都不勾选
$("#checkedNoBtn").click(function(){
$items.prop("checked",false);
$checkedAllBox.prop("checked",false);
});
//3. 点击'反选': 改变所有爱好的勾选状态
$("#checkedRevBtn").click(function(){
$items.each(function(){
this.checked = !this.checked;
})
$checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
});
//4. 点击'提交': 提示所有勾选的爱好
$("#sendBtn").click(function(){
$items.filter(':checked').each(function () {
alert(this.value)
})
});
//5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function(){
$items.prop("checked",this.checked);
});
//6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$items.click(function(){
$checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
})
})
全选练习-原生版和jQuery的更多相关文章
- jq变态全选vs原生变态全选
<script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery入门简单实现反选与全选
//html代码<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input t ...
- Jquery学习之路(一) 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...
- 列表中checked全选按钮的实现
用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...
- jquery版的全选，全不选和反选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
随机推荐
- 【转载】WCF 客户端识别认证之UserName认证
原文地址: http://blog.csdn.net/zxz414644665/article/details/9308055 过程:用户调用service,服务端验证用户传来的用户名和密码(传输过程 ...
- 4538: [Hnoi2016]网络
4538: [Hnoi2016]网络 链接 分析: 整体二分. 对于一次操作,可以二分一个答案mid,判断权值大于mid的路径是否全部经过这个点.如果是 ,那么这次询问的答案在[l,mid-1]之间, ...
- .net core中使用缓存(cache)
官方文档:https://docs.microsoft.com/en-us/aspnet/core/performance/caching/memory?view=aspnetcore-2.2#use ...
- code first 创建数据库，add-migration update-database
第一步: 第二步:
- lemon批量蒯
RT,很久以前写的拿出来骗一骗访问量 把sh文件扔进source里面运行sh *.sh 从子目录蒯出来: #!/bin/bash for file in ./*/*/*.cpp do name=${f ...
- 用 Python 破解 WIFI 密码，走到哪里都能连 WIFI
WIFI 破解,Python 程序员必学技能.WIFI 已经完全普及,现在 Python 程序员没网,走到哪里都不怕! 教你们一招,如何在图片中提取 Python 脚本代码.图片发送至手机 QQ 长按 ...
- 2018年美国大学生数学建模竞赛(MCM/ICM) E题解题思路
任务一就是让大家去做个基本的评价,是典型的评价类问题,所以应该按照 指标+方法的步骤去做,首先就是寻找国家脆弱性的相关概念,然后选择影响国 家脆弱性的指标,如气候变化,经济发展,政治状况等等,再就是构 ...
- python自编程序实现——robert算子、sobel算子、Laplace算子进行图像边缘提取
实现思路: 1,将传进来的图片矩阵用算子进行卷积求和(卷积和取绝对值) 2,用新的矩阵(与原图一样大小)去接收每次的卷积和的值 3,卷积图片所有的像素点后,把新的矩阵数据类型转化为uint8 注意: ...
- 微信JS-SDK实现上传图片功能
最近在项目开发中,有一个在微信WEB项目中上传图片的需求,一开始使用了传统的<input type="file">的方式去实现,但是后面发现在使用这种传统模式时会由于手 ...
- python os.walk详解
os模块大全详情 os.walkos.walk方法,主要用来遍历一个目录内各个子目录和子文件. os.walk(top, topdown=True, onerror=None, followlinks ...