案列三：全选全不选反选

最新推荐文章于 2022-11-03 17:45:01 发布
最新推荐文章于 2022-11-03 17:45:01 发布
阅读量418 收藏 1
点赞数

案列三：全选全不选反选

一、思路分析

    ·使用复选框上面一个属性判断是否选中
        　　　　- checked属性
        　　　　- checked=true：选中
        　　　　- checked=false：不选中
    ·创建一个页面
        　　　　·复选框和按钮
        　　　　　　- 四个复选框表示爱好
        　　　　　　- 还有一个复选框操作 全选和选不选，也有一个事件
    ·三个按钮，分别有事件
        　　　　　　- 全  选
        　　　　　　- 全不选
        　　　　　　- 反  选
    ·全选操作
        　　　　·步骤：
        　　　　 /*
        　　　　1、获取要操作的复选框
        　　　　　　- 使用getElementsByName()
        　　　　2、返回是数组，
        　　　　　　- 属性 checked判断复选框是否选中
        　　　　　　　　checked = true; //表示选中
        　　　　　　　　checked = false;//表示不选中
        　　　　　　- 遍历数组，得到的是每一个checkbox
        　　　　　　　　把每一个checkbox属性checked=true
        　　　　*/
    ·全不选操作
        ·步骤
        　　　　/*
        　　　　1、获取到要操作的复选框
        　　　　2、返回的是数组，遍历数组
        　　　　3、得到每一个复选框
        　　　　4、设置复选框的属性 checked=false
        　　　　*/

    ·反选操作
        ·步骤
        　　　　/*
        　　　　1、获取到要操作的复选框
        　　　　2、返回数组，遍历数组
        　　　　3、得到每一个复选框
        　　　　4、判断当前的复选框是选中还是不选中
        　　　　　　- if(love1.checked == true) {}
        　　　　5、如果选中，属性checked设置成false，否则，设置成true
        　　　　*/
    ·使用复选框实现全选和全不选
        ·步骤
        　　　　/*
        　　　　1、得到上面那个复选框
        　　　　　　- 通过id获取到
        　　　　2、判断这个复选框是否是选中
        　　　　　　- if条件，checked==true
        　　　　3、如果是选中，下面是全选
        　　　　4、如果不是选中，下面是全不选
            */


二：代码如下
------

        <html>
           <head>
             <title>HTML示例</title>
             <style type="text/css">
             </style>
           </head>
           <body>
              <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
              <br/>
              <input type="checkbox" name="love"/>篮球
              <input type="checkbox" name="love"/>排球
              <input type="checkbox" name="love"/>羽毛球
              <input type="checkbox" name="love"/>乒乓球
              <br/>
              <input type="button" value="全选" onclick="selAll();"/>
              <input type="button" value="全不选" onclick="selNo();"/>
              <input type="button" value="反选" onclick="selOther();"/>
              <script type="text/javascript">
              //实现全选和全不选
              function selAllNo() {
                  /
                  1、得到上面那个复选框
                      - 通过id获取到
                  2、判断这个复选框是否是选中
                      - if条件，checked==true
                  3、如果是选中，下面是全选
                  4、如果不是选中，下面是全不选
                  /
                  //得到上面复选框
                  var box1 = document.getElementById("boxid");
                  //判断这个复选框是否是选择
                  if(box1.checked == true) { //是选择状态
                  //调用全选方法
                  selAll();
                  } else { //不是选中状态
                  //调用全不选方法
                  selNo();
                  }
              }
              //实现反选的操作
              function selOther() {
                  /
                  1、获取到要操作的复选框
                  2、返回数组，遍历数组
                  3、得到每一个复选框
                  4、判断当前的复选框是选中还是不选中
                      - if(love1.checked == true) {}
                  5、如果选中，属性checked设置成false，否则，设置成true
                  /
                  //获取要操作的复选框
                  var loves11 = document.getElementsByName("love");
                  //遍历数组
                  for(var a=0;a<loves11.length;a++) {
                  //得到每一个复选框
                  var love11 = loves11[a];
                  //判断当前这个复选框是什么状态
                  if(love11.checked == true) { //是选中的状态
                      //设置checked=false
                      love11.checked = false;
                  } else { //是不选中的状态
                      //把checked=true
                      love11.checked = true;
                  }
                  }
              }
              //实现全不选的操作
              function selNo() {
                  /
                  1、获取到要操作的复选框
                  2、返回的是数组，遍历数组
                  3、得到每一个复选框
                  4、设置复选框的属性 checked=false
                  /
                  //得到要操作的复选框
                  var loves1 = document.getElementsByName("love");
                  //遍历数组
                  for(var j=0;j<loves1.length;j++) {
                  //得到每一个复选框
                  var love1 = loves1[j];
                  //设置属性的值checked = false;
                  love1.checked = false;
                  }
              }
              //实现全选的操作
              function selAll() {
                  /
                  1、获取要操作的复选框 
                      - 使用getElementsByName()
                  2、返回是数组，
                      - 属性 checked判断复选框是否选中
                       checked = true; //表示选中
                       checked = false;//表示不选中
                      - 遍历数组，得到的是每一个checkbox
                       把每一个checkbox属性checked=true                    
                  /
                  //获取要操作的复选框
                  var loves = document.getElementsByName("love");
                  //遍历数组，得到每一个复选框
                  for(var i=0;i<loves.length;i++) {
                 var love1 = loves[i]; //得到每一个复选框
                 //设置属性是true
                 love1.checked = true;
                 }
             }
             </script>
         </body>
西柚萌神
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:         $(function(){             $(“#checkedAll”).click(function(){                 $(‘[name=items]:checkbox’).attr(‘checked’,true);             });             $(“#checkedNo”).click(function(){                 $(‘[name=items]:ch
前端案例-全选全不选与反选
Admin_76的博客
10-23 436
前端全选与全不选思路分析。
JS实现的全选、全不选及反选功能【案例】
12-11
本文实例讲述了JS实现的全选、全不选及反选功能。分享给大家供大家参考，具体如下： 效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中. html结构代码: <input class = 'check' type="checkbox" > <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input id="
案例：全选与全不选及反选
a13054305221的博客
09-28 245
效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中. html结构代码: <input class = 'check' type="checkbox" ><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input ...
杨老师课堂之JavaScript案例全选、全不选、及反选
杨校的博客
04-12 2491
    JavaScript案例之全选、全不选、及反选效果图：思路：    1.先做界面        1.1制作按钮        1.2制作复选框    2..JavaScript        3.1根据不同的标签名称去获取不同的元素                  3.2当第一个按钮--全选--被单击 会 触发一个函数，此函数涉及到复选框全部选中功能，但是复选框一共有多少个是未知的，所以...
全选，全不选，反选 案例
IT666DHW的博客
10-13 325
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 全选，全不选，反选 <script src="../jquery-2.1.0.
大型电商网站购物车案例 ----- 全选与反选
Yuake2的博客
04-05 206
<style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table...
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
全选、全不选、反选
qq_47997447的博客
10-08 54
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action=""> <!-- 假如你在input中写了checked,就算checked=false也会在页面中显示被选...
JS用按钮对复选框进行操作（全选、全不选、反选）
Lou__Lan的博客
11-03 491
JS用按钮对复选框进行操作（全选、全不选、反选）
jQuery实现全选反选全不选案例
郭晓湉
04-01 1497
$(function(){    //全选    $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);    });    //全不选    $("#checkNo").click(function(){     $(":checkbox").attr("checked",false);
3.27日学习笔记 复选框全选、反选、全不选
mr_sun的博客
03-27 212
需求:点击全选btn所有按钮点亮,第一排全选按钮也跟着亮,全不选btn,都不亮。全选按钮根据第二排按钮是否都亮自动选取或取消 html部分 <input type="checkbox" id="allInp">全选<br> <input type="checkbox" class="inp"> <input type="checkbox" class="inp"> <input type="checkbox" class="inp"> <i
Js_Checkbox全选反选案列
Veer Han
04-14 1073
代码：<!DOCTYPE html> <html> <head> <title>checkboxs.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" c
【Javascript】入门之checkbox的全选、反选和不选
qq_37086980的博客
11-26 454
如果选中, checked属性为true, 反之为false <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框选择</title> </head&g...
4.28学习笔记 jQuery实现全选、反选、全不选
mr_sun的博客
04-28 261
该效果以前使用原生js已经写过,现在用jq改写! html内容可从前面的文章看到下面是jq代码,写jq代码之前要先看是否引入了jq库 // 定义 inp为true 的数量 默认值为0 let inpCount = 0; // 封装函数实现反选 全选 全不选 function all(flag) { // 循环设置checked的属性值 for (let i = 0; i < $('.inp').length; i++) { // 调用函数传入的值 $(`.inp`).eq(i).prop('.
JavaScript_案例_1.检测用户输入_2.文本框默认样式设置_3.设计一个表格的样式实现全选反选的功能 _Unit_5;
qq_38053395的博客
08-05 262
Topic 1 : 检测用户的输入 ： 题目要求： 编写一个用户注册页面 检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ； 代码如下 ： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;用户注册页面&lt;/title&g
以表格为例的全选、全不选、反选
不一样心情的博客
06-01 428
创建表格 <table border="1" cellspacing="" cellpadding=""> <tr> <td><input type="checkbox" name="c" id="" value="" /></td> <td>Data</td> <td&...
html全选全不选反选
最新发布
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> 全选 function selectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i; i++){...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值