jQuery实现复选框的全选和反选

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文主要分享了使用jQuery实现复选框的全选和反选的示例代码。具有很好的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

话不多说，请看代码

<!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./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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO！

上一篇：JS实现购物车特效下一篇：jQuery制作图片旋转效果

jQuery实现复选框的全选和反选

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

jQuery实现复选框的全选和反选

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设