JS小功能(checkbox实现全选和全取消)实例代码

2024-12-12 20:41:14

效果：

代码：

代码如下:

<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var ckall = document.getElementById('ck1');
            var ck = document.getElementsByName('name1');
            ckall.onclick = function () {
                for (var i = 0; i < ck.length; i++) {
                    if (ckall.checked == true) {
                        ck[i].checked = true;
                    }
                    else {
                        ck[i].checked = false;
                    }
                }
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="checkbox" id="ck1" />
    全选
    <div id="div1">
        <input type="checkbox" name="name1" />
        <input type="checkbox" name="name1" />
        <input type="checkbox" name="name1" />
        <input type="checkbox" name="name1" />
        <input type="checkbox" name="name1" />
        <input type="checkbox" name="name1" />
    </div>
    </form>
</body>

CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

某一个时候,CheckBoxList的选择太多,用户需要一个全选或全取消的功能.下面使用Javascript来实现它. 准备好一个对象: MusicType 复制代码代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Summary description for MusicType /// </summary> n
JS小功能(checkbox实现全选和全取消)实例代码

效果: 代码: 复制代码代码如下: <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { var ckall = document.getElementById('ck1'); var ck = docu
jQuery实现CheckBox全选、全不选功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现CheckBox全选.全不选</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/jav
JS实现的全选、全不选及反选功能【案例】

本文实例讲述了JS实现的全选.全不选及反选功能.分享给大家供大家参考,具体如下: 效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中. html结构代码: <input class = 'check' type="checkbox" > <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox">
vue.js实现的全选与全不选功能示例【基于elementui】

本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o
JS实现“全选”和"全不选"功能代码实例

这篇文章主要介绍了JS实现"全选"和"全不选"功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g
js实现全选和全不选功能

本文实例为大家分享了js实现全选和全不选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作复选框</title> </head> <body> <input type="checkbox" id="quan
android基于ListView和CheckBox实现多选和全选记录的功能

应用开发中经常会有从数据库中读取数据显示,然后选中多条.全部记录并且删除的需求.在做定制系统联系人的时候也遇到这样的需求,下面写个简单的通过ListView和CheckBox实现多选.全选的例子.下面是具体的代码. 效果如下: MultiSelectActivity /** * MultiSelectActivity */ public class MultiSelectActivity extends Activity implements OnClickListener, OnItemCli
jquery实现全选和全不选功能效果的实现代码【推荐】

网上好多代码都是错的 <!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"> <head> <meta http-equiv=&qu
js实现全选和全不选

本文实例为大家分享了js实现全选和全不选的具体代码,供大家参考,具体内容如下非常简洁的几行原生js实现全选和全不选,大神们可以在此基础上加上反选功能. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选.全不选</title> </head> <body> <table border="1"

JS小功能(checkbox实现全选和全取消)实例代码

相关推荐

随机推荐