20230905实现全选反选的操作

最新推荐文章于 2024-09-05 10:41:35 发布
最新推荐文章于 2024-09-05 10:41:35 发布
阅读量31 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41632427/article/details/132864579
版权

代码

#
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
</head>
<body>
    <ul style="list-style: none;">
        <span>选择爱好</span>
        <li><input type="checkbox" name="hb" />爬山</li>
        <li><input type="checkbox" name="hb" />游泳</li>
        <li><input type="checkbox" name="hb" />攀岩</li>
        <li><input type="checkbox" name="hb" />冲浪</li>
        <li><input type="checkbox" name="hb" />说唱</li>
    </ul>
    <input type="button" onclick="setAll()" value="全选" id="qx" />
    <input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
    <input type="button" onclick="setOthers()" value="反选" id="fx" />
</body>
</html>

--------------------------------------------
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
</head>

<body>
    <ul style="list-style: none;">
        <span>选择爱好</span>
        <li><input type="checkbox" name="hb" />爬山</li>
        <li><input type="checkbox" name="hb" />游泳</li>
        <li><input type="checkbox" name="hb" />攀岩</li>
        <li><input type="checkbox" name="hb" />冲浪</li>
        <li><input type="checkbox" name="hb" />说唱</li>
    </ul>
    <input type="button" onclick="setAll()" value="全选" id="qx" />
    <input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
    <input type="button" onclick="setOthers()" value="反选" id="fx" />

    <script>
        var inp = document.getElementsByName('hb')
        function setAll() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = true
            }
        }
        function unsetAll() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = false
            }
        }
        function setOthers() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = !inp[i].checked
            }
        }
    </script>
</body>

</html>

验证


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
</head>

<body>
    <ul style="list-style: none;">
        <span>选择爱好</span>
        <li><input type="checkbox" name="hb" />爬山</li>
        <li><input type="checkbox" name="hb" />游泳</li>
        <li><input type="checkbox" name="hb" />攀岩</li>
        <li><input type="checkbox" name="hb" />冲浪</li>
        <li><input type="checkbox" name="hb" />说唱</li>
    </ul>
    <input type="button" onclick="setAll()" value="全选" id="qx" />
    <input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
    <input type="button" onclick="setOthers()" value="反选" id="fx" />

    <script>
        var inp = document.getElementsByName('hb')
        function setAll() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = true
            }
        }
        function unsetAll() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = false
            }
        }
        function setOthers() {
            for (var i = 0; i < inp.length; i++) {
                inp[i].checked = !inp[i].checked
            }
        }
    </script>
</body>

</html>
前端歌谣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现全选反选
zhao_li_ming的博客
10-04 5114
1.效果图 2.分析步骤 两种方法： （1）普通全选反选实现，通过methods方法实现 1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 2.接着写静态布局 3.挂载dom ...
js实现全选反选功能
weixin_44612172的博客
05-14 1754
js实现全选反选功能 * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0;
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 2660
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
vue实现全选和反选
weixin_50755029的博客
03-10 738
vue实现全选和反选的方式
AngularJS实现全选反选功能
10-23
AngularJS实现全选反选功能的知识点可以分为以下几个方面进行详细介绍： 1. AngularJS基本概念：AngularJS是一种流行的前端JavaScript框架，由Google维护和开发。它的主要目的是通过扩展HTML来简化Web应用的开发。...
DataGridView表头添加checkbox实现全选反选
09-01
在Windows应用程序开发...总之，`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
【JavaScript源代码】jQuery实现全选反选操作案例.docx
12-29
在本篇文档中，我们将探讨如何使用jQuery库来实现全选和反选的功能。这个案例主要涉及HTML表格中的复选框以及与之相关的jQuery事件处理。以下是对代码的详细解析： 首先，HTML部分包含了表格结构，其中每个表格行`...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 474
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
关于前端服务器字体的引用
qq_69304031的博客
09-02 458
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
js对象操作常用方法
m0_75276704的博客
09-02 571
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 572
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4311
深入理解JavaScript闭包：避免常见的内存泄漏问题
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 805
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
前端学习Day36
2401_83657100的博客
08-31 432
同样的将变量和函数组合到了一起并能通过this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。我们可以把那些不变的方法，直接定义在 prototype对象上，这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的this 指向构造函数和原型对象中的this都指向实例化的对象。构造函数和原型对象中的this 都指向实例化的对象。构造函数体现了面向对象的封装特性；
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
最新发布
weixin_52479803的博客
09-05 414
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
ant design vue+vue3+ts实现一天内按钮只能点击2次，并置灰，且过当天0点时需复原~
m0_62626838的博客
08-31 554
第二步：针对一天内按钮只能点击2次需求，首先我们要拿到当前的系统日期及明天日期，并转化为“2024-09-01”格式，为后续通过Date.parse()转化为总毫秒数做对比，来实现点击次数，但此时容易忽略一个问题，即弹窗是通过v-if实现的，每一次进来都会重新渲染，在子组件中定义的点击次数变量会清零，所以此时需要进行状态管理，这里使用的是pinia来实现的，将点击次数等数据存储在pinia中，然后在弹窗组件中使用即可。第三步：针对过0点之后复原问题。（这里应计算大于等于，后续优化）
jQuery全选反选操作实战教程
通过按钮触发相应的jQuery函数，可以实现全选表格中的所有复选框、反选已有选择、查看已选中和未选中的项，以及反选的升级版功能。 在jQuery中，全选和反选操作通常涉及到对DOM元素的选择和状态改变。在这个案例中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值