首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:03:10
字体:
来源:转载
供稿:网友
<!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>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表