javascript check box 全选及部分选择

最新推荐文章于 2023-04-27 19:35:18 发布

page1969

最新推荐文章于 2023-04-27 19:35:18 发布

阅读量841

点赞数

文章标签： JavaScript jQuery C C++ C# ViewUI


<!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="Content-Type" content="text/html; charset=utf-8" />
        <title>javascript check box 全选及部分选择</title>
        <script type="text/javascript">
			var Erit;
			window["undefined"]=window["undefined"];

			if (!Erit) {
				Erit = {};
			} else if (typeof Erit != "object") {
				throw new Error("This namespace has been registered.");
			} else if (Erit.newClass) {
				throw new Error("The newClass has been created.");
			}

			Erit.SetCheckAll = function (){};

			Erit.addLoadEvent = function(obj, evt, fn){
				if(obj.addEventListener) {
					obj.addEventListener(evt, fn, false);
				}
				else if(obj.attachEvent) {
					obj.attachEvent('on'+evt, fn);
				}
			};

			Erit.SetCheckAll.prototype = {
				checkObj : null,
				flag : 0,
				init: function(name, eid){
					this.checkObj = this.getInputList(name);
					var C = this.checkObj;
					var cl = C.length;
					var oThis = this;
					this.flag = 0;
					var Eid = this.get(eid);

					this.get(eid).onclick = function (){
						oThis.setEvent(this,C);
					};

					for (var i = 0;i < cl;i++){
						C[i].onclick = function (){
							oThis.setChAllStatus(this,Eid,cl);
						}
					}
				},
				get: function(id){
					return document.getElementById(id);
				},
				getInputList: function(name){
					return document.getElementsByName(name);
				},
				setEvent: function(oThis, C){
					var cl = C.length;
					if (oThis.checked) {
						for (var i = 0; i < cl; i++) {
							C[i].checked = true;
							if (this.flag < cl) {
								this.flag++;
							}
						}
					} else if (!oThis.checked) {
						for (var j = 0; j < cl; j++) {
							C[j].checked = false;
							if (this.flag > 0) {
								this.flag--;
							}
						}
					}
				},
				getSelectValue:function (){
					var chObj = this.checkObj;
					var cl = chObj.length;
					var chva = [];
					for (var i = 0;i < cl;i++){
						if(chObj[i].checked == true){
							chva.push(chObj[i].value);
						}
					}
					return chva;
				},
				setChAllStatus:function (oThis,e,l){
					if (oThis.checked == true){
						if (this.flag <= l) {
							this.flag++;
						}
					} else if (oThis.checked == false){
						if (this.flag >= 0) {
							this.flag--;
						}
					}

					for (var j = 0;j < l;j++){
						if (this.flag == l) {
							e.checked = true;
						} else {
							e.checked = false;
						}
					}
				}
			};

			Erit.addLoadEvent(window,"load",function (){
				var er = new Erit.SetCheckAll();
				er.init("chk","chk5");
				er.get("btn1").onclick = function (){
					alert(er.getSelectValue());
				}
			});
        </script>
    </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <input type="checkbox" id="chk1" name="chk" value="1" />
            </td>
            <td>
                aaaaaa
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk1" name="chk" value="1" />
            </td>
            <td>
                aaaaaa
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk2" name="chk" value="1" />
            </td>
            <td>
                aaaaaa
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk3" name="chk" value="1" />
            </td>
            <td>
                aaaaaa
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk4" name="chk" value="1" />
            </td>
            <td>
                aaaaaa
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk5" name="chk5" />全选
            </td>
            <td> 

            </td>
        </tr>
    </table>
	<input type="button" id="btn1" name="btn1" value="ok"/>
    </body>
</html>

page1969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript check box 全选及部分选择

[code="java"] javascript check box 全选及部分选择 var Erit; window["undefined"]=window["undefined"]; if (!Erit) { Erit = {}; } else if (typeof...
复制链接

扫一扫