jQuery实现复选框的全选和反选
更新时间：2017年02月02日 13:40:43 作者：小小赵老汉
本文主要分享了使用jQuery实现复选框的全选和反选的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<label for="apple">苹果</label>
<input type="checkbox" name="apple">
<label for="banana">香蕉</label>
<input type="checkbox" name="banana">
<label for="orange">橘子</label>
<input type="checkbox" name="orange">
<input type="button" value="全选" onclick="allPick()">
<input type="button" value="全不选" onclick="unAllPick()">
<input type="button" value="反转" onclick="inverserPick()">
</form>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
// 全选
function allPick() {
$("[type=checkbox]:checkbox").each(function () {
this.checked = true;
})
}
// 全不选
function unAllPick() {
$("[type=checkbox]:checkbox").each(function () {
this.checked = false;
})
}
// 反转
function inverserPick() {
$("[type=checkbox]:checkbox").each(function () {
this.checked = !this.checked;
})
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JQuery表单元素取值赋值方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这两天帮朋友的网站做个放大镜，就是淘宝上的那种，两个框，一个框放小图，另外一个框放大图。本来说想从网上直接载一个拿来Hack，但是找好半天都没有找到，看了看JQ的插件也好像不对，干脆就自己写了。2010-08-08
这篇文章主要介绍了高效jQuery选择器的5个技巧,结合实例形式总结分析了jquery选择器使用过程中发的各种常用技巧,需要的朋友可以参考下2019-11-11
探讨JQUERY JSON的反序列化类 using问题的解决方法
本篇文章是对JQUERY JSON的反序列化类 using问题的解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jquery.gridrotator实现响应式图片展示画廊效果
本教程将教大家制作一个jQuery响应式图片展示画廊效果，所有图片以网格的形式排列，然后定时随机翻转其中某些格子用来切换图片。这种效果可以用来当做背景或装饰放在我们的网站上。2015-06-06
Checbox的操作包括已选、未选、判断等等，下面有个不错的示例，使用jquery完成，感兴趣的朋友可以参考下2013-11-11
在本篇文章里小编给大家分享了关于jquery获取img的src值实例介绍和相关内容，有需要的朋友们学习下。2019-01-01
下面小编就为大家带来一篇jquery 中toggle的2种用法详解(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
jquery中each可用于遍历对象和数组，如需退出each循环可使回调函数返回false，下面有个示例，大家可以看看2014-08-08
本文是脚本之家小编给大家分享的jquery validate验证框架大全，本文内容讲的非常详细，感兴趣的朋友一起看看吧2015-09-09
最新评论