checkbox 的全选与全不选

只需要调用 cekAll.check();方法,这个方法接收两个参数:

参数一: 全选按钮的 id 以字符串的形式写
参数二: 其他 checkbox 的 name 值 也是以字符串的形式写

使用很简单 : 复制 js 代码到你的 js 文件的任何地方,只需要在HTML文档加载完以后调用 cekAll.check();传入参数即可 什么点击事件,什么获取对象,统统不用写,

装点:不管你的 checkbox 是写到页面上的还是动态读取的,都不需要加事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var cekAll = {
        ‘num‘:0,
        check:function(part,chid){
            var parent = document.getElementById(part);
            var child = document.getElementsByName(chid);
            parent.onclick = function(){
                if(parent.checked != true){
                    for(var j = 0;j<child.length;j++){
                        child[j].checked = false;
                        cekAll.num = 0;
                    };
                }else{
                    for(var i=0;i< child.length;i++){
                        if(parent.checked == true){
                            child[i].checked = true;
                            cekAll.num = child.length;
                        };
                    };
                };
            };
            cekAll.childClick(part,chid);
        },
        childClick:function(one,two){
            var one1 = document.getElementById(one);
            var two1 = document.getElementsByName(two);
            for(var j = 0;j< two1.length;j++){
                two1[j].onclick = (function(){
                    return function(){
                            if(this.checked == false){
                                one1.checked = false;
                                cekAll.num--;
                            }else{
                                cekAll.num ++;
                                if(cekAll.num == two1.length){
                                    one1.checked = true;
                                };
                            };
                        };
                })();
            };
        }
    };
    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="quanxuan"/>全选<br/>
    </div>
<script>
    // 动态添加的 checkbox 跟写到页面上是一样的
    var div = document.getElementsByTagName(‘div‘)[0];
    var arr = [‘吃饭‘,‘睡觉‘,‘打豆豆‘];
        for(i in arr){
            var str = ‘<input type="checkbox" name="che1">‘+arr[i]+‘‘;
            div.innerHTML += str;
        }
    // -- 静态写到页面上的、动态添加的,调用 cekAll.check(); 方法的书写格式都一样
    cekAll.check(‘quanxuan‘,‘che1‘);
    </script>
</body>
</html>
时间: 2024-10-14 01:18:54

checkbox 的全选与全不选的相关文章

一个checkbox 用jquery实现全选、全不选

之前因为一个很小的错误弄了很久,现在才做好. 效果图: 肯定还有更简单的方法. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http:

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

jQuery实现CheckBox全选、全不选

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 &

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr

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

jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 Js代码  下载 /** * 全选 * 对于Jquey1.7.2+版本,使用attr会造成只能操作一次. * 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. * 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. * @param checkName */ function checkAll(chec

关于checkbox全选与全不选遇到的问题

HTML: <div class="outbox"> <label for="box">全选</label> <input type="checkbox" id="box"/> </div> <div class="outbox2"> <label for="box1">选项1</label>

jQuery对复选框(checkbox)的全选,全不选,反选等的操作

效果截图: HTML代码: <body><ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox"

html checkbox全选或者全不选

/* 全选或全不选 */ function CheckedAllOrNo() { var arr = $(':checkbox'); for (var i = 1; i < arr.length; i++) { arr[i].checked = arr[0].checked; } }

checkbox全选/取消全选

//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $("input[name='cbxCommodity']").prop("checked","checked"); }else{ $("input[name='cbxCommodity']").removeAttr("check