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

绝地灬酷狼 2022-07-11 15:24 185阅读 0赞

<!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="全选" οnclick="allPick()">
     <input type="button" value="全不选" οnclick="unAllPick()">
     <input type="button" value="反转" οnclick="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>

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 186 阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 228 阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年07月11日 15:24/ 0 赞/ 186 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 345 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 247 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 210 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 270 阅读

相关 jquery实现复选框的全选与全不选与反选

<html> <head> <meta charset="utf-8" /> <title>全选/全不选/反选</title>

古城微笑少年丶/ 2022年04月03日 06:26/ 0 赞/ 246 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 371 阅读

相关 JQuery实现复选框CheckBox的全选、反选、提交操作

对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。【示例】使用Jquery实现复选框CheckBox的全选、反

我就是我/ 2021年08月31日 23:13/ 0 赞/ 402 阅读