iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >JavaScript如何实现页面一键全选或反选
  • 510
分享到

JavaScript如何实现页面一键全选或反选

2023-07-02 15:07:22 510人浏览 泡泡鱼
摘要

这篇文章主要介绍“javascript如何实现页面一键全选或反选”,在日常操作中,相信很多人在JavaScript如何实现页面一键全选或反选问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript如

这篇文章主要介绍“javascript如何实现页面一键全选或反选”,在日常操作中,相信很多人在JavaScript如何实现页面一键全选或反选问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript如何实现页面一键全选或反选”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

具体代码如下

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/CSS">            .hobby {                width: 600px;                height: 50px;                background-color: #5F9EA0;                line-height: 50px;            }             .but {                float: right;                margin-right: 10px;            }        </style>    </head>    <body>        <div class="hobby">            <!-- 创建多选框 -->            <input type="checkbox" checked="true" name="hobby" id="" value="羽毛球" />羽毛球            <input type="checkbox" name="hobby" id="" value="赛车" />赛车            <input type="checkbox" name="hobby" id="" value="听音乐" />听音乐            <input type="checkbox" name="hobby" id="" value="看杂志" />看杂志            <!-- 选择按钮 -->            <div class="but">                <button type="button" onclick="selectAll(this)">全选</button>                <button type="button" onclick="selectAllOut()">全不选</button>            </div>        </div>         <script type="text/javascript">            // 全选方法            function selectAll(obj) {                var a = document.getElementsByName("hobby");                for (var i = 0; i < a.length; i++) {                    a[i].checked = "true";                    console.log(a[i].value)                }            };            // 全部取消方法            function selectAllOut() {                var a = document.getElementsByName("hobby");                for (var i = 0; i < a.length; i++)                    a[i].checked = "";            }        </script>    </body></html>

JavaScript如何实现页面一键全选或反选

到此,关于“JavaScript如何实现页面一键全选或反选”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: JavaScript如何实现页面一键全选或反选

本文链接: https://www.lsjlt.com/news/342754.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript如何实现页面一键全选或反选
    这篇文章主要介绍“JavaScript如何实现页面一键全选或反选”,在日常操作中,相信很多人在JavaScript如何实现页面一键全选或反选问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript如...
    99+
    2023-07-02
  • JavaScript实现页面一键全选或反选
    本文实例为大家分享了JavaScript实现页面一键全选或反选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     &l...
    99+
    2024-04-02
  • jquery如何实现一键控制checkbox全选、反选或全不选
    小编给大家分享一下jquery如何实现一键控制checkbox全选、反选或全不选,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!j...
    99+
    2024-04-02
  • JavaScript实现全选或反选功能
    本文实例为大家分享了JavaScript实现全选或反选功能的具体代码,供大家参考,具体内容如下 代码如下 <!DOCTYPE html> <html lang=...
    99+
    2024-04-02
  • JavaScript实现表单全选或反选效果
    本文实例为大家分享了JavaScript实现表单全选或反选的具体代码,供大家参考,具体内容如下 表单中常常会用到checkbox复选框,通过复选框做出的列表全选或全不选的效果也是很常...
    99+
    2024-04-02
  • jQuery如何实现选择或者不选页面上全部复选框
    这篇文章主要为大家展示了“jQuery如何实现选择或者不选页面上全部复选框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现选择或者不选页面上全部复选框”这篇文章吧。选择或者不选...
    99+
    2023-06-27
  • javascript checkbox全选和反选的简单实现
    javascript checkbox全选和反选的简单实现 发现这样写checkbox全选和反选最简洁明了。function tempUser(val){ $("input[name='userid']").each(fun...
    99+
    2023-05-31
    javascript checkbox 全选
  • JavaScript实现复选框全选或全取消操作
    本文实例为大家分享了JavaScript实现复选框全选或全取消的具体代码,供大家参考,具体内容如下 实现思路 1、获取总选框、所有小选框元素对象 2、按钮控制小按钮- - -给总选...
    99+
    2024-04-02
  • jQuery如何实现全选、反选和不选功能
    这篇文章给大家分享的是有关jQuery如何实现全选、反选和不选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框...
    99+
    2024-04-02
  • jQuery如何实现复选框的全选和反选
    这篇文章主要为大家展示了“jQuery如何实现复选框的全选和反选”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现复选框的全选和反选”这篇文章吧...
    99+
    2024-04-02
  • javascript如何实现全选
    这篇文章主要介绍“javascript如何实现全选”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript如何实现全选”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • js, jQuery如何实现全选、反选功能
    这篇文章给大家分享的是有关js, jQuery如何实现全选、反选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。js ,jq实现全选、反选功能:js:思路:1.点击全选按钮实现...
    99+
    2024-04-02
  • C#中如何实现listbox的全选,全部选,反选功能
    这篇文章将为大家详细讲解有关C#中如何实现listbox的全选,全部选,反选功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。c#  listbox的全选,全不选,反选方法//全选方法一&nbs...
    99+
    2023-06-17
  • JavaScript定义简单的页面复选框实现全选操作
    目录1. 效果演示2. 弹窗代码3. 变量阐述4. 实现逻辑1. 效果演示 2. 弹窗代码 <el-dialog title="分配角色" :visible.sync="di...
    99+
    2023-05-18
    JavaScript全选 JavaScript复选框全选
  • 怎么使用JavaScript实现全选和反选的功能
    本篇内容介绍了“怎么使用JavaScript实现全选和反选的功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • JavaScript如何实现全选功能
    本篇内容介绍了“JavaScript如何实现全选功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现全选的原理在学习如何实现全选功能之前,...
    99+
    2023-07-06
  • html+javascript+bootstrap如何实现层级多选框全层全选和多选功能
    这篇文章主要为大家展示了“html+javascript+bootstrap如何实现层级多选框全层全选和多选功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“h...
    99+
    2024-04-02
  • CSS中怎么实现一个页面复选框
    本篇文章给大家分享的是有关CSS中怎么实现一个页面复选框,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。第一步 分拆选中/未选中<inpu...
    99+
    2024-04-02
  • html页面中的单选框功能如何实现
    本文小编为大家详细介绍“html页面中的单选框功能如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“html页面中的单选框功能如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • angular如何实现一个列表的选择全选交互组件
    这篇文章给大家分享的是有关angular如何实现一个列表的选择全选交互组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。需求分析实现单选;实现全选;可以设置允许多选还是单选。如果...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作