当前位置：首页 > news >正文

JQuery封装脚本系列之复选框(CheckBox)

news 来源：原创 2024/5/6 2:17:56

2010-03-30

最近,把项目整理了一下. 把以前用的一些 javascript 脚本整理下, 特针对 JQuery 给出一系列的封装脚本.

-------------------------

我测试用的JQuery版本是 jquery1.3.2, 在 ie7,ie8,firefox 下测试通过.

// // author: Power By Wellhope Corporation, All Rights Reserved // create time: 2009-11 // update site: http://blog.csdn.net/zhangyunbo1116 /** * function:全部选中 * @para chkName Checkbox名称 */ function Wellhope_SelectAll(chkName) { $("input[type=checkbox][@name="+chkName+"]").each(function(){this.checked=true;}); //$("input[name='chkCity']").each(function(){this.checked=true;}); } /** * function:全部取消选中 * @para chkName Checkbox名称 */ function Wellhope_CancelSelectAll(chkName) { //$("input[name='chkCity']").attr("checked","false"); //这个有问题,不能实现全部取消的效果 $("input[type=checkbox][@name="+chkName+"]").each(function(){this.checked=false;}); } /** * function:反向选中 * @para chkName Checkbox名称 */ function Wellhope_DeSelectAll(chkName) { $("input[type=checkbox][@name="+chkName+"]").each(function(){ if(this.checked) this.checked = false; else this.checked = true; }); } /** * function:查看选中的值 * @para chkName Checkbox名称 * @return 选中的值, 如果有多个,使用逗号隔开 */ function Wellhope_GetSelectedValue(chkName) { var sltvalue = ""; var isHave = false; //alert($("intput[name=chkCity][checked]").val()); $("input[type=checkbox][@name="+chkName+"][@checked]").each(function(){ if(this.checked){ sltvalue += this.value; sltvalue+=","; } }); if(""!=sltvalue) { var length = sltvalue.length; sltvalue = sltvalue.substring(0,length-1); } return sltvalue; } //----------------------------

上面的脚本拷贝到一个单独的javascript文件,然后在项目中应用即可. 如我的工程是

下面给出完整的一个测试脚本的页面, 如果看客感兴趣, 可以拷贝出来运行即可

<!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=gbk" /> <title>演示JQuery操作Checkbox</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body, html { font-size:12px; } ;</style> <mce:script type="text/javascript" src="jquery1.3.2.js" mce_src="jquery1.3.2.js"></mce:script> <mce:script type="text/javascript" src="jquery-wellhope-checkbox.js" mce_src="jquery-wellhope-checkbox.js"></mce:script> </head> <body> <mce:script type="text/javascript" language="javascript"></mce:script> <h2>演示使用JQuery操作复选框CheckBox</h2> </p> <hr /> <div id="divButtons" style=" border-width: thin; border-color:#009; border-style:solid;" mce_style=" border-width: thin; border-color:#009; border-style:solid;"> <input type="submit" name="btn1" id="btn1" value="全部选中" οnclick="Wellhope_SelectAll('chkCity')"/> <input type="submit" name="btn2" id="btn2" value="取消所有选中" οnclick="Wellhope_CancelSelectAll('chkCity')"/> <input type="submit" name="btn2" id="btn3" value="反向选中" οnclick="Wellhope_DeSelectAll('chkCity')"/> <input type="submit" name="btn3" id="btn4" value="查看选中的值" οnclick="alert(Wellhope_GetSelectedValue('chkCity'))" /> </div> <p> </p> <div id="divContent" style=" border-width: thin; border-color:#009; border-style:dashed;" mce_style=" border-width: thin; border-color:#009; border-style:dashed;"> <p> <label> <input type="checkbox" name="chkCity" value="北京市" id="chkCity_0" /> 北京市</label> <br /> <label> <input type="checkbox" name="chkCity" value="上海市" id="chkCity_1" /> 上海市</label> <br /> <label> <input type="checkbox" name="chkCity" value="徐州市" id="chkCity_2" /> 徐州市</label> <br /> <label> <input type="checkbox" name="chkCity" value="官山镇" id="chkCity_3" /> 官山镇</label> <br /> </p> </div> <p> </p> <br /><br /><br /><br /> <h2>POWER BY WELLHOPE 2009</h2> </body> </html>