js, jQuery实现全选、反选功能
更新时间：2017年03月08日 09:20:31 作者：虔诚_k
本文主要介绍了js, jQuery实现全选、反选功能的方法，具有很好的参考价值。下面跟着小编一起来看下吧
js ，jq实现全选、反选功能：
js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
全选<input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
<div id="lower">
苹果<input type="checkbox" name="apple" id="apple"/>
香蕉<input type="checkbox" name= "banner" id="banner" />
橘子<input type="checkbox" name="origin" id="origin"/>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var lb = document.getElementById("lower");
var lber = lb.getElementsByTagName("input");
//全选，反选
box.onclick = function(){
if(this.checked){
for(var i=0;i<lber.length;i++){
lber[i].checked = true;
}
}else{
for(var i=0;i<lber.length;i++){
lber[i].checked = false;
}
}
}
//下面全选后，全选框才勾上
for(var i=0;i<lber.length;i++){
lber[i].onclick = function(){
//引入计数器sum
var sum = 0;
for(var j=0;j<lber.length;j++){
if(lber[j].checked){
sum += 1;
if(sum == lber.length){
box.checked = true;
} else {
box.checked = false;
}
}
}
}
}
</script>
</body>
</html>
jq,使用jQuery 前先引入 jq:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" value="全选" id="ckAll"/>水果</br>
<div class="box">
<input type="checkbox" value="苹果" id="apple"/>苹果
<input type="checkbox" value="香蕉" id="bann"/>香蕉
<input type="checkbox" value="橘子" id="origin"/>橘子
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//给所有 .box input 元素添加 checked = ckAll 当前的状态；
//prop('checked',value) ,第一个值获取属性，第二个值：设置属性值。prop只有一个参数时，表示获取元素属性。
$('#ckAll').click(function(){
$('.box input').prop('checked',$(this).prop('checked'));
});
$('.box input').click(function(){
//each 便利每一个元素，让其执行该函数
$('.box input').each(function(){
if(!$(this).prop('checked')){
$('#ckAll').prop('checked',false);
//有一个不满足就 跳出该循环，避免执行下面
return false;
}else{
$('#ckAll').prop('checked',true);
}
})
})</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
我们开发的人来说经常要加个判断，要不可能某些功能没法正常使用。要是没加个判断就会给大家带来些麻烦2013-11-11
这篇文章主要介绍了关于微信小程序bug记录与解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了HTML+JavaScript实现年会抽奖程序的200行代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
JavaScript+HTML5 canvas实现放大镜效果完整示例
这篇文章主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章介绍了用 JavaScript 和 HTML5 Canvas 实现文字黑洞特效的项目,包括项目特征,如黑洞特效、引力效果、文字动画和交互设计,以及技术亮点,还阐述了实现逻辑,涵盖项目结构、文字和黑洞对象的实现、动画循环等,并给出了详细的代码示例和解释2025-03-03
JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)
这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,本文分别介绍了其他类型转为字符串、其他类型转为数值型以及其他类型转为布尔类型的方法,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了r.js来合并压缩css文件的示例代码，在r5下新建一个css文件夹，里面有四个css文件：main.css、nav.css、form.css、grid.css，具体示例代码大家参考下本文2018-04-04
JavaScript Date对象详解及时间戳和时间的相互转换问题
这篇文章主要介绍了JavaScript Date对象详解及时间戳和时间的相互转换问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JS实现中英文混合文字溢出友好截取功能,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性。需要的朋友可以参考下2018-08-08
最新评论