论坛首页 入门技术论坛

javascript check box 全选及部分选择

浏览 6232 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-12-25   最后修改:2008-12-25
<!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>&nbsp;
                
            </td>
        </tr>
    </table>
	<input type="button" id="btn1" name="btn1" value="ok"/>
    </body>
</html>

   发表时间:2008-12-25  
jquery

$(":checkbox").attr('checked','checked');

$(":checkbox").removeAttr('checked');
0 请登录后投票
   发表时间:2008-12-30  
ayeah 写道
jquery

$(":checkbox").attr('checked','checked');

$(":checkbox").removeAttr('checked');

自己动手,丰衣足食。
0 请登录后投票
   发表时间:2009-07-27  
$(":checkbox")

这是取1个checkbox的值呀你还是去一组checkbox的值?
0 请登录后投票
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics