这篇文章给大家分享的是有关js, Jquery如何实现全选、反选功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。js ，jq实现全选、反选功能：js:思路：1.点击全选按钮实现
这篇文章给大家分享的是有关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, jQuery如何实现全选、反选功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: js, jQuery如何实现全选、反选功能
本文链接: https://lsjlt.com/news/67530.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0