checkBox全选反选全不选

DOM操作checkbox(全选/反选/全不选) check.html                        您的爱好很广泛!!!       全选/全不选           保龄球   篮球   跑步   唱歌                     window.onload=function(){    //    document.getElementById( 阅读详情

方法1

<script language="javascript">
    function selectIt() {

        form = document.lzyy

        action = event.srcElement.name

        for (var i = 0; i < form.elements.length; i++) {

            if (form.elements[i].name == "checkbox") {

                e = form.elements[i]

                e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)
                ////在这里 通过条件表达式?:来使每个框反选。朋友们可以好好思考一下。这种首先是一种实现方式。其二 还能是代码简练。哈哈 反正个人是喜欢这种方式拉。
            }

        }

    }
</script>
<form name="lzyy">
    <p class="STYLE1">
        全 选
        <input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt()">
        <br>
        反 选
        <input type="checkbox" name="invest" value="checkbox" onClick="selectIt()">
        <br>
        Item1
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item2
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item3
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item4
        <input type="checkbox" name="checkbox" value="checkbox">
        <br>
        Item5
        <input type="checkbox" name="checkbox" value="checkbox">
    </p>
</form>

方法2

<html>
   
    <head>
        <script type="text/javascript">
            function checkEvent(name, allCheckId) {
                var allCk = document.getElementByIdx_x(allCheckId);
                if (allCk.checked == true) checkAll(name);
                else checkAllNo(name);

            }

            //全选
            function checkAll(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = true;

                }
            }

            //全不选
            function checkAllNo(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = false;
                }
            }

            //反选
            function reserveCheck(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++) {
                        if (names[i].checked) names[i].checked = false;
                        else names[i].checked = true;

                    }
                }

            }
        </script>
    </head>
   
    <body>
        <input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />
        全选
        <input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')"
        />
        反选
        <br />
        <input type="checkbox" name="ck" value="1" />
        篮球
        <br />
        <input type="checkbox" name="ck" value="2" />
        旅游
        <br />
        <input type="checkbox" name="ck" value="3" />
        读书
        <br />
        <input type="checkbox" name="ck" value="4" />
        美食
        <br />
        <input type="checkbox" name="ck" value="5" />
        睡觉
    </body>

</html>

 

方法3

// 说明:Javascript 控制 CheckBox 的全选与取消全选
function checkAll(name) {
    var el = document.getElementsByTagName_r('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = true;
        }
    }
}
function clearAll(name) {
    var el = document.getElementsByTagName_r('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = false;
        }

    }

}

方法4

var checkFlag = true;    
function ChooseAll() {
    if (checkFlag) {        
        var inputs = document.all.tags("INPUT");        
        for (var i = 0; i < inputs.length; i++) {          
            if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll") {
                inputs[i].checked = true;          
            }        
        }
        checkFlag = false;      
    } else {        
        var inputs = document.all.tags("INPUT");        
        for (var i = 0; i < inputs.length; i++) {          
            if (inputs[i].type == "checkbox" && inputs[i].id != "CheckAll") {
                inputs[i].checked = false;          
            }        
        }
        checkFlag = true;      
    }    
}

 

方法5

<input type="button" name="" value="不计算长度" onclick="a()">
<input type="button" name="" value="全选" onclick="b()">
<input type="button" value="缓存" onclick="c()">
<input type="checkbox" name="test[]" value="0">
测试测试
<br>
<script language="JavaScript">
    <!--
    var ca = new Array();
    function a() {
        var m = document.getElementsByName('test[]');
        for (var i = 0; i < m.length; i++) {
            m[i].checked == true ? m[i].checked = false: m[i].checked = true;
        }
    }

    function b() {
        var m = document.getElementsByName('test[]');
        var l = m.length;
        for (var i = 0; i < l; i++) {
            m[i].checked == true ? m[i].checked = false: m[i].checked = true;
        }
    }

    function c() {
        if (ca.length == 0) {
            ca = cache();
        }
        cl = ca.length;
        for (var i = 0; i < cl; i++) {
            ca[i].checked == true ? ca[i].checked = false: ca[i].checked = true;
        }
    }

    function cache() {
        var m = document.getElementsByName('test[]');
        var cache = new Array();
        var l = m.length;
        for (var i = 0; i < l; i++) {
            cache[i] = m[i];
        }
        return cache;
    }

    //-->
   
</script>

 

三种方式实现checkbox全选,反选 三种方式实现checkbox全选,反选,最简单的js技术;基于java代码,简单易懂,提供三3个demo,每一个都能实现 立即下载

相关推荐

WPF之CheckBox组的全选设计

WPF之CheckBox组的全选设计,知识点有位运算和枚举的Flags特性

Bootstrap开源包中checkbox的全选和反选

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34414196的博客 118

checkbox全选,反选,选特定的值

js原生,checkbox全选,反选,选特定的值。jq会更简单。。初学时候比用的

jquery实现复选框(checkbox)的全选与反选

介绍一下jquery实现checkbox的全选与反选

青松之竹_Java博客 2万+

WPF-DataGrid中CheckBox实现全选与非全选

在DataGrid中实现了 简单的全选与非全选。

SSH 全选反选批量删除

SSH 全选反选批量删除案例,整合了mysql数据库,实现了当前在网上看到的给中全反选 分页功能

js中checkbox中的全选和反选效果实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选

wangdajiao的博客 1万+

Python与西门子PLC数据交互实战:基于Snap7的跨平台工业通信指南

本文详细介绍了如何使用Python和Snap7库实现与西门子PLC的数据交互。内容涵盖跨平台环境搭建、连接参数配置、数据读写实战及性能优化技巧,为工业自动化、数据采集和智能制造场景提供了一套轻量、灵活且高效的通信解决方案。

vim8coder的博客 284

用Jquery实现checkbox的反选、全选、全不选

当我们在用JS来实现web端操作的时候,多选框的全选、全不选和反选是最常用的功能,尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。        下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能:         假设有4个checkbox多选框,他们包含在一个id=“chk”的div中,而全选、全不选、反选的button按钮所在标签的i

阴慧超的博客 4万+

UM2 3D 打印机 DIY 实践 (2) 电路篇

涉及到的东西非常多,实际上后面还会讲到。主要部件清单: 主板 mega2560 + Ramps1.4 + LCD12864 各一张 42 x38mm x3,xyz 轴各一台 42 x23mm x1,用在挤出机 泰坦远程挤出机 x1 TMC2225 驱动板 x4, 替代a4988、TMC2208,静音效果好,性价比高 s-250-12v 20A开关电源 x1。功率必须足够大,宁可选大一点的 大功率 MOS 管,25A x1 NTC .

afeiqiang的专栏 3601

零基础学会制作 基于STM32/51单片机的智能血压表设计/血压表/血压计

本系统是以单片机为主控,传感器模快、显示模块、人机交互、无线传输等组成的智能血压表设计。传感器用于测量血压和脉搏,主控电路板用于处理数据和控制设备,显示屏则用于显示测量结果。通过软件设计,完成测量数据的处理,其中血压和脉搏的测量、数据的分析和处理等。

weixin_55654459的博客 2473

JavaScript——checkbox的全选,全不选与反选实现

页面显示 功能分析 全选按钮可以选中所有的checkbox 全不选按钮可以取消所有的checkbox 反选按钮可以选中未选择的checkbox,并取消以选择的checkbox 实现 页面内容 css table{ border: 1px solid black; width: 500px; margin: auto; } td,th{ text-align: center; border: 1px solid; } div{ margin: auto; width: 500px;

Melonico的博客 1375

【libnice】meson + vs2022,生成win32工程

libnice

突围 947

checkBox 全选、全不选、反选

checkBox的使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&gt...

151

LVGL colorwheel组件教程一(调色板)

【代码】LVGL colorwheel组件教程一(调色板)

摸鱼专家 434

【Autoware】Autoware.universe安装过程与问题记录

Autoware.universe安装过程与问题记录

DevFrank的博客 2740

js实现checkbox全选,反选,全不选

pageEncoding="utf-8"%>js实现checkbox全选,反选,全不选    //复选框全选    function checkAll(formvalue) {        var roomids = document.getElementsByName(formvalue);        for ( var j = 0; j             if (roomids.i

不懂love的博客 625

62. 如何通过增强(Enhancement) 的方式给 SAP ABAP 标准程序增添新功能

本文通过一个实际的例子,介绍了如何不通过修改 SAP 标准 ABAP 程序源代码的方式,对其的功能进行增强,即采取 ABAP 增强开发的方式进行二次开发,这是一种在实际 SAP 项目实施过程中使用非常广泛的技术。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 3309

jquery 对 checkbox 的 全选、反选、全不选等操作

jQuery对checkbox的一些操作,比如选中,全选,反选,全不选等,通常我们会用到attr来改变checkbox的checked属性,然而通过实际测试,会出现各种小问题,例如第一次成功,第二次就不成功,调试也调不出来,说白了就是第二次的是attr方法未起到效果。经过查阅文档资料,最终确定使用prop 方法能彻底解决此问题,代码如下: function countCheckbox() {//

sunqian_happy的博客 509

Vue3 - 详细实现微信公众号H5网页内置浏览器中预览下载word文档(doc)、excel表格(xls)、ppt文稿、pdf文档等文件,微信内部直接打开预览和下载到本地教程,安卓苹果手机无差异兼容

vue3,nuxt3,微信公众号,h5,移动端,网页,网站,vue微信内置浏览器下载文件,下载文件,在微信浏览器里面实现下载任意文件,H5需要在微信浏览器中下载excel文件,实现网页在微信内置浏览器中下载文件详细教程,安卓点击下载会提示打开浏览器,后端返回流文件,如何解决无法下载文件,跳转至浏览器下载文件,发送到电脑微信,安卓,苹果,手机系统,微信H5页面,vue3微信公众号H5网站,内置浏览器下载文档,如何在微信浏览器中预览office文件,word文档,excel文档,pdf文档,ppt文档,offi

🏆 前端领域优质创作者 1万+

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

jQuery 循环获取checkbox复选框的值,checkbox全选、全不选、反选

前端页面html <tr v-for="(log,index) in logList"> <!-- v-bind:value绑定 --> <td><input name="ids" :value="log.logId" type="checkbox"></td> </tr> js代码 - 循环获取checkbox复选框的值 //获取复选框checkbox选中的个数 /*var size = $("

Java小皮孩 3743

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

JavaScript实现表单checkbox的全选,全不选,反选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function mybtn(bu...

WeiZhihui优快云的博客 696

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

java全选反选全不选,jQuery对checkbox 复选框的全选全不选反选的操作

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码。HTML代码: 1.时间都去哪儿了 2.海阔天空 3.真的爱你 4.不再犹豫 5.光辉岁月 6.喜欢妳 全选/全不选jquery代码:$(function(){//全选/全不选$("#all").click(function(){$("[name=items]:checkbox").attr("checked",this.checked...

weixin_35997133的博客 206

jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

jquery checkbox全选,全不选,反选方法, jquery checkbox全选只有第一次成功 jquery checkbox全选只能操作一次,下载 Js代码   /**   * 全选   * 对于Jquey1.7.2+版本,使用attr会造成只能操作一次。   * 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。 

ningxiao1112的博客 394
上一篇: script添加删除行/js随意操控table…
下一篇: SVN图标含义及常见问题解决方法深…
jarry.liu
博客等级 码龄16年 36粉丝 304原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jarry.liu

如果对您有帮助,鼓励下博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值