js实现多选复选操作

最新推荐文章于 2024-08-07 23:29:39 发布
最新推荐文章于 2024-08-07 23:29:39 发布
阅读量3.7k 收藏 2
点赞数
分类专栏： web前端 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingse/article/details/78751334
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>全选复选框</title>
    <style>
        td{border-style: solid;text-align: center}
        #first{background-color: yellow}
        #last{background-color: aqua}
    </style>
    <script>
        window.οnlοad=function(){
            var all=document.getElementsByTagName("input");
            //全选操作
            all[0].οnclick=function(){
                    for(var i=1;i<all.length-1;i++){
                        all[i].checked=all[0].checked;
                    }
            }
            //反选操作
            all[all.length-1].οnclick=function(){

                for(var i=1;i<all.length-1;i++){
                    //选择状态更改为与当前相反
                    all[i].checked=! all[i].checked;
                }
                //判断是否为全部选中
                isCheckedAll();
            }

            //为每一个选择按钮关联事件
            for(var i=1;i<all.length-1;i++){
                all[i].οnclick=isCheckedAll;
            }

            //判断全选框是否更改状态
            function isCheckedAll(){
                var tmp=true;
                for(var i=1;i<all.length-1;i++){
                    if(all[i].checked==false){//有一个未选择时，全选按钮为false
                        tmp=false;
                        break;
                    }
                }
                all[0].checked=tmp;
            }

        }
    </script>
</head>
<body>
    <table width="500">
        <tr id="first">
            <td>
                <input type="checkbox" id="c0"/>全选
            </td>
            <td>
                复选框全选示例
            </td>
            <td>.....</td>
            <td>.....</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c1"/>1
            </td>
            <td>
                作用：
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c2"/>2
            </td>
            <td>
                a:点击全选时选择全部
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c3"/>3
            </td>
            <td>
                b:选择反选时，选中的变为未选中，反之变为选中
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c4"/>4
            </td>
            <td>
                c:当所有所中时全选按钮自动变为选中
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c5"/>5
            </td>
            <td>
                。。。。。。。。。。。。。。。。。。。。。
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="c6"/>6
            </td>
            <td>
                。。。。。。。。。。。。。。。。。。。
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr id="last">
            <td>
                <input type="button" value="反选" id="c7"/>
            </td>
            <td>
               。。。。。。。。。。。。。。。。。
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

choosezzz
关注
专栏目录
用 JS（JavaScript ）实现多选、全选、反选
zzvar的博客
04-23 2574
JS小例题学习内容：需求总结： 学习内容： 需求 用 JavaScript 实现全选、反选、多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-
js实现带复选框的多选下拉框
daxi玫瑰的博客
11-19 4029
最近被派去做一个不使用任何框架的纯js的项目，界面属于那种机器的界面，算是中规中矩的。新特性需要用原生的js或者jq写一个可多选的下拉框，实现的方式有很多。网上常见的有一下几种： 1.下载multiple-select.js插件，由于公司使用网络的限制，下载插件不方便，而且这个最后的效果也不是我想要的，所以没有采用这种实现方法。 2.网上还有常见的 div+ul&li 的实现，这种也比较方便，不过在处理值的时候，感觉不like~，最后也没有选择这种方法。 3.使用div+定位：（根据上面方法2
js实现多选功能
Polaris_best的博客
03-10 1502
js实现多选功能
【Web APIs】JavaScript 操作多个元素 ① ( 多选一互斥按钮案例 | getElementsByTagName 方法获取 HTMLCollection 伪数组对象 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-07 2766
一、多元素操作案例 1、案例需求 - 多选一互斥按钮案例 2、案例核心要点 - getElementsByTagName 方法获取多个元素 3、案例核心要点 - 实现策略 4、完整代码示例
JS(JavaScript)中如何实现，复选框checkbox多选功能
qq_58341172的博客
03-01 1133
当我们通过querySelectorAll()获取的类元素是一个伪数组，因此我们需要将其转化为真正的数组。arr.every()返回的是一个boolean值，指的是只要有一个元素大于50，返回true；arr.every()返回的是一个boolean值，指的是每一个元素都大于2，返回true；arr.filter()返回的是一个数组，是一个过滤器，指的是返回数字大于30的数组元素；以上代码指的是，数组中任何一个元素(item)，都被选中；Array.from(arr):将其转为数组。
js的多项选择
11-23 39
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
js多选
pengpeng11的专栏
06-09 83
[code="js"] function actionEvent(methodname){ var form = document.forms[0]; if(validateIsSelect(form.all, form.productids)){ form.action=''; form.method.value=methodname; ...
jquery下拉多选复选框插件
04-22
本主题涉及的是一个基于jQuery的下拉多选复选框插件，该插件能够提供用户友好的界面，方便用户在下拉菜单中进行多选操作，尤其适用于后台数据管理或前端交互场景。下面将详细介绍这个插件及其相关的知识点。 1. **...
Angular实现一个简单的多选复选框的弹出框指令实例
08-30
在本文中，我们将深入探讨如何使用Angular框架实现一个带有多选复选框的弹出框指令。这个功能常用于创建自定义的下拉菜单，允许用户通过勾选多个选项来作出选择。首先，我们来看看实现这个功能所需的关键知识点： 1...
JS实现复选框的全选和批量删除功能
10-20
在JavaScript（JS）中，实现复选框的全选和批量删除功能是常见的前端交互需求，尤其是在电商网站或管理系统中。下面将详细讲解如何通过JS实现这两个功能。 首先，我们来看全选功能的实现。全选功能通常由一个主复选...
微信小程序复选框实现多选一功能过程解析
10-15
在微信小程序中，实现复选框（Checkbox）的“多选一”功能是一项常见的需求，即用户只能在多个选项中选择一个。以下是对这个过程的详细解析。 首先，我们需要定义数据结构来存储复选框的选项。在示例中，`data` ...
js实现多选多列选择
03-24
用js实现多选控件,也可以分多列。 ... ... ... 很简单，不多写了.
多个js实现的多选下拉框
06-05
多个js实现的多选下拉框
js 实现 复选框全选（一）
03-31
js 实现 复选框全选（一）! 值得下载看看!资源免费,大家分享!!
js控制多选功能
iteye_10047的博客
07-17 195
js代码 [code="java"] function submitData() { var chb =document.getElementsByName('checkBoxs'); var count = 0; if(chb.length == 0) { alert("现在没有服务项目信息，不能进该项操作！"); return...
js实现多选、全选、反选、取消选择（篇一）
纸飞机博客
12-04 7780
就算全世界离开你，还有一个我来陪，我会永远站在你身边。 对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。 多选和取消选择 效果图如下： 代码如下： <template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item.
动态表格-JavaScript
weixin_43157935的博客
03-03 212
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; ...
js 多选框
你随风飘扬的笑
04-10 368
js实现多选框的全选 <form action="" method="post"> <input type="checkbox" id="first" /><br> <input type="checkbox" name="aihao" value="唱歌" />唱歌 <br> <input type="che...
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 2701
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
微信小程序自定义多选复选框实现
本文主要探讨了如何在微信小程序中实现自定义复选框的功能，包括创建可滚动的多选复选框以及按照名称字母顺序排序的列表。文章提供了相关的代码实例，适合学习或工作中用于此类需求的参考。 在微信小程序中，原生的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值