JSP列表中复选框批量选择功能实现
- 格式:docx
- 大小:19.24 KB
- 文档页数:3
Checkbox复选框实现全选和全不选功能代码直接放在HTML/CSS/Javascript在线代码运⾏中页⾯即可显⽰,不理解的地⽅可以查看注释或评论区交流<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS实现复选框全选和全不选</title><script type="text/javascript">window.onload = function() {// 通过ID获取到全选按钮var checkAll = document.getElementById("checkAll");// 获取到name属性为"hobby"的所有按钮var hobby = document.getElementsByName("hobby");// 点击按钮进⾏全选和全不选checkAll.onclick = function() {for (var i = 0; i < hobby.length; i++) {/* 根据全选按钮属性为true/false时同时将属性值赋值给每⼀个"hobby"按钮 */hobby[i].checked = checkAll.checked;}}/*当所有其他选项都被选中时,全选按钮才是选中状态*/// 获取name属性为"hobby"按钮的数量var length = hobby.length;// 页⾯加载完成后此循环⽤来获取每⼀个"hobby"按钮for (var i = 0; i < length; i++) {// 当"hobby"按钮触发点击时间时执⾏以下函数hobby[i].onclick = function() {// 定义⼀个计数变量var count = 0;// 点击事件触发后执⾏此循环for (var i = 0; i < length; i++) {// 如果有⼀个"hobby"复选框被选中,count计数加⼀if (hobby[i].checked == true) {count++;}}/* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时,将返回的值true赋值给全选按钮,反之亦然 */checkAll.checked = (count == length);}}}</script></head><body><input type="checkbox" name="hobby" id="smoke" />抽烟<br /><input type="checkbox" name="hobby" id="drink" />喝酒<br /><input type="checkbox" name="hobby" id="perm" />烫头<hr /><input type="checkbox" name="checkAll" id="checkAll" />全选<br /></body></html>运⾏结果:。
js实现复选框的全选与反选a.单击列头复选框全选或全不选子项b.只要有一个子项没有选中,则取消列头的选中状态c.当所有子项目选中时,列头复选框自动置为选中状态d.将子项的复选框反过来选代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>全选与反选</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript">// --列头全选框被单击---function ChkAllClick(sonName, cbAllId){var arrSon = document.getElementsByName(sonName);var cbAll = document.getElementById(cbAllId);var tempState=cbAll.checked;for(i=0;i<arrSon.length;i++) {if(arrSon[i].checked!=tempState)arrSon[i].click();}}// --子项复选框被单击---function ChkSonClick(sonName, cbAllId) {var arrSon = document.getElementsByName(sonName);var cbAll = document.getElementById(cbAllId);for(var i=0; i<arrSon.length; i++) {if(!arrSon[i].checked) {cbAll.checked = false;return;}}cbAll.checked = true;}// --反选被单击---function ChkOppClick(sonName){var arrSon = document.getElementsByName(sonName);for(i=0;i<arrSon.length;i++) {arrSon[i].click();}}</script></head><body><form name="form1" method="post" action=""><table width="500" border="1"><tr bgcolor="#FFFF66"><td><INPUT name="chkAll" id="chkAll" title="全选"onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td> <td align="center">复选框全选示例</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td><td> 作用:</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td><td> a.单击列头复选框全选或全不选子项</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td><td> b.只要有一个子项没有选中,则取消列头的选中状态</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td><td> c.当所有子项目选中时,列头复选框自动置为选中状态</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5'onclick="ChkSonClick('chkSon','chkAll')" />5</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td><td>d.将复选框反过来选</td><td> </td><td> </td></tr><tr bgcolor="#66FFFF"><td><INPUT name="chkOpposite" id="chkOpposite" title="反选"onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td><td align="center">反选示例</td><td> </td> <td> </td> </tr></table></form></body></html>。
JSP复选框全选和反选……Js代码 11.<script language="javascript">2.function selectIt() {3.4.form = document.lzyy5.6.action = 7.8.for (var i = 0; i < form.elements.length; i++) {9.10.if (form.elements[i].name == "checkbox") {11.12. e = form.elements[i]13.14. e.checked = (action == "selectAll") ? (form.selectAll.ch ecked) : (!e.checked)15.////在这里通过条件表达式?:来使每个框反选。
朋友们可以好好思考一下。
这种首先是一种实现方式。
其二还能是代码简练。
哈哈反正个人是喜欢这种方式拉。
16.}17.18.}19.20.}21.</script>22.<form name="lzyy">23.<p class="STYLE1">24.全选25.<input type="checkbox" name="selectAll" value="che ckbox" onClick="selectIt()">26.<br>27.反选28.<input type="checkbox" name="invest" value="check box" onClick="selectIt()">29.<br>30.Item131.<input type="checkbox" name="checkbox" value="ch eckbox">32.<br>33.Item234.<input type="checkbox" name="checkbox" value="ch eckbox">35.<br>36.Item337.<input type="checkbox" name="checkbox" value="ch eckbox">38.<br>39.Item440.<input type="checkbox" name="checkbox" value="ch eckbox">41.<br>42.Item543.<input type="checkbox" name="checkbox" value="ch eckbox">44.</p>45.</form>Js代码 21.<html>2.3.<head>4.<script type="text/javascript">5.function checkEvent(name, allCheckId) {6.var allCk = document.getElementById(allCheckId);7.if (allCk.checked == true) checkAll(name);8.else checkAllNo(name);9.10.}11.12.//全选13.function checkAll(name) {14.var names = document.getElementsByName(name);15.var len = names.length;16.if (len > 0) {17.var i = 0;18.for (i = 0; i < len; i++)s[i].checked = true;20.21.}22.}23.24.//全不选25.function checkAllNo(name) {26.var names = document.getElementsByName(name);27.var len = names.length;28.if (len > 0) {29.var i = 0;30.for (i = 0; i < len; i++)s[i].checked = false;32.}33.}34.35.//反选36.function reserveCheck(name) {37.var names = document.getElementsByName(name);38.var len = names.length;39.if (len > 0) {40.var i = 0;41.for (i = 0; i < len; i++) {42.if (names[i].checked) names[i].checked = false;43.else names[i].checked = true;44.45.}46.}47.48.}49.</script>50.</head>51.52.<body>53.<input type="checkbox" id="ckall" onclick="checkEve nt('ck','ckall')" />54.全选55.<input type="checkbox" id="ckReserve" onclick="rese rveCheck('ck','ckReserve')"56./>57.反选58.<br />59.<input type="checkbox" name="ck" value="1" />60.篮球61.<br />62.<input type="checkbox" name="ck" value="2" />63.旅游64.<br />65.<input type="checkbox" name="ck" value="3" />66.读书67.<br />68.<input type="checkbox" name="ck" value="4" />69.美食70.<br />71.<input type="checkbox" name="ck" value="5" />72.睡觉73.</body>74.75.</html>Js代码 31.// 说明:Javascript 控制 CheckBox 的全选与取消全选2.function checkAll(name) {3.var el = document.getElementsByTagName('input');4.var len = el.length;5.for (var i = 0; i < len; i++) {6.if ((el[i].type == "checkbox") && (el[i].name == name)) {7.el[i].checked = true;8.}9.}10.}11.function clearAll(name) {12.var el = document.getElementsByTagName('input');13.var len = el.length;14.for (var i = 0; i < len; i++) {15.if ((el[i].type == "checkbox") && (el[i].name == name) ) {16.el[i].checked = false;17.}18.19.}20.21.}Js代码 41.var checkFlag = true;2.function ChooseAll() {3.if (checkFlag) {4.var inputs = document.all.tags("INPUT");5.for (var i = 0; i < inputs.length; i++) {6.if (inputs[i].type == "checkbox" && inputs[i].id != "Check All") {7.inputs[i].checked = true;8.}9.}10.checkFlag = false;11.} else {12.var inputs = document.all.tags("INPUT");13.for (var i = 0; i < inputs.length; i++) {14.if (inputs[i].type == "checkbox" && inputs[i].id != "Ch eckAll") {15.inputs[i].checked = false;16.}17.}18.checkFlag = true;19.}20.}Js代码 51.<input type="button" name="" value="不计算长度" onclick="a()">2.<input type="button" name="" value="全选" onclick="b()">3.<input type="button" value="缓存" onclick="c()">4.<input type="checkbox" name="test[]" value="0">5.测试测试7.<script language="JavaScript">8.<!--9.var ca = new Array();10.function a() {11.var m = document.getElementsByName('test[]');12.for (var i = 0; i < m.length; i++) {13.m[i].checked == true ? m[i].checked = false: m[i].chec ked = true;14.}15.}16.17.function b() {18.var m = document.getElementsByName('test[]');19.var l = m.length;20.for (var i = 0; i < l; i++) {21.m[i].checked == true ? m[i].checked = false: m[i].chec ked = true;22.}23.}24.25.function c() {26.if (ca.length == 0) {27.ca = cache();28.}29.cl = ca.length;30.for (var i = 0; i < cl; i++) {31.ca[i].checked == true ? ca[i].checked = false: ca[i].che cked = true;32.}34.35.function cache() {36.var m = document.getElementsByName('test[]');37.var cache = new Array();38.var l = m.length;39.for (var i = 0; i < l; i++) {40.cache[i] = m[i];41.}42.return cache;43.}44.45.//-->46.47.</script>。
使⽤js实现复选框的全选、取消功能id为all的想设置全选的那个框的id,name为checkname[]的是每个⼩复选框;第⼀种:<script>function checkAll() {var all=document.getElementById('all');//获取到点击全选的那个复选框的idvar one=document.getElementsByName('checkname[]');//获取到复选框的名称if(all.checked==true){//因为获得的是数组,所以要循环为每⼀个checked赋值for(var i=0;i<one.length;i++){one[i].checked=true;}}else{for(var j=0;j<one.length;j++){one[j].checked=false;}}}</script>第⼆种:<span style="font-size:14px;"><script>function checkAll() {var all=document.getElementById('all');//获取到点击全选的那个复选框的idvar one=document.getElementsByName('checkname[]');//获取到复选框的名称//因为获得的是数组,所以要循环为每⼀个checked赋值for(var i=0;i<one.length;i++){one[i].checked=all.checked; //直接赋值不就⾏了嘛}}</script></span>html代码:<thead><tr><td><input type="checkbox" name="all" id="all" onclick="checkAll()"/></td></tr></thead><tbody><td><input type="checkbox" name="checkname[]"value="1"/></td><td><input type="checkbox" name="checkname[]" value="2"/></td><td><input type="checkbox" name="checkname[]" value="3"/></td><td><input type="checkbox" name="checkname[]" value="4"/></td><td><input type="checkbox" name="checkname[]" value="5"/></td> </tbody>。
js实现同一页面多个全选(checkbox)博客分类: jsHTMLJavaScriptASP直接代码:1、js:<script language="javascript" type="text/javascript">function ChangeAllCheckStatus(objCheckBox, chkAllName,item){if (objCheckBox.tagName == "INPUT" && objCheckBox.type == "checkbox") {var allInput = document.getElementsByName(item);for (var i = 0; i < allInput.length; i++){if (allInput[i].type == "checkbox" && allInput[i].name != chkAllName){allInput[i].checked = objCheckBox.checked;}}}}function IsSelectOne(chkAllName,item){var allInput = document.getElementsByName(item);var count = 0;var argCarID = "";for (var i = 0; i < allInput.length; i++){if (allInput[i].type == "checkbox" && allInput[i].name != chkAllName ) {if(allInput[i].checked){argCarID = argCarID + allInput[i].id + "|";count++;}}}document.getElementById("hide_SelectedLCID").value = argCarID;return count;}function BatchUpdate(){var url = "LeaderCarPrintItem.aspx?LC_IDs=" +document.getElementById("hide_SelectedLCID").value;window.open(url,"window","");return false;}function DaoChu(){if(IsSelectOne('chkAll') == 0){alert('请选择一条记录');return false;} else{return BatchUpdate();}}</script>2、html:1)全选按钮<input id="CheckAll_Now" type="checkbox" name="CheckAll_Now"onclick="ChangeAllCheckStatus(this,'CheckAll_Now','CheckItem_Now');" />2)子按钮<input id='<%#Eval("ID")%>' type="checkbox" name="CheckItem_Now"/>3)button[url=" onclick=]<img alt="" src="../../Content/Images/button02_21.gif" width="85"height="18" border="0" />[/url]PS:主要实现记住的方法是document提供的几个方法:close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
Jsp之复选框的使⽤1、全选复选框getElementsByName返回的是数组<script type="text/JavaScript">function selectAll(flag){var ids = document.getElementsByName("ids");for(var i=0;i<ids.length;i++){ids[i].checked=flag;}}</script>checkbox的name值要与js对应<input type="checkbox" name="ids" value=<%=map.get("id")%> />调⽤:⽤另⼀个checkbox调⽤<input type="checkbox" name="checkall" value=""onclick="javascript:selectAll(this.checked);">⽤链接或button调⽤,并实现全不选<a href="#" onclick="javascript:selectAll(true);">全选</a><input type="button" onclick="javascript:selectAll(false);" value="取消全选">2、获取所选的框的个数function getSelectCount() {var count = 0;var ids = document.getElementsByName("ids");for ( var i = 0; i < ids.length; i++) {if (ids[i].checked) {count++;}}return count;}3、提交所选框代表的各个值(即value属性)到action中要求各个checkbox的name是ids,且在⼀个name="form1"的表单中function del() {if(getSelectCount()<1){alert("⾄少要选中⼀个选项!!");}else {var th = document.form1;th.action="<%=path%>/servlet/ProductEdit?action=del";th.submit();}}在dopost中获取ids数组String[] id=request.getParameterValues("ids");Done!。
JS实现CheckBox复选框全选、不选或全不选功能CheckBox控件表明⼀个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0)。
在应⽤程序中使⽤该控件为⽤户提供“True/False”或“yes/no”的选择。
因为 CheckBox 彼此独⽴⼯作,所以⽤户可以同时选择任意多个 CheckBox,进⾏选项组合。
CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下思路:1、获取元素2、给全选不选反选添加点击事件3、⽤for循环checkbox4、把checkbox的checked设置为true即实现全选5、把checkbox的checked设置为false即实现不选6、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。
html代码:<input type="button" value="全选" id="sele"/><input type="button" value="不选" id="setinterval"/><input type="button" value="反选" id="clear"/><div id="checkboxs"><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /></div>js代码:<script>window.onload=function(){var sele=document.getElementById('sele');//获取全选var unsele=document.getElementById('setinterval');//获取不选var clear=document.getElementById('clear');//获取反选var checkbox=document.getElementById('checkboxs');//获取divvar checked=checkbox.getElementsByTagName('input');//获取div下的input//全选sele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=true}}//不选unsele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=false}}//反选clear.onclick=function(){for(i=0;i<checked.length;i++){if(checked[i].checked==true){checked[i].checked=false}else{checked[i].checked=true}}}}</script>以上所述就是本⽂的全部内容了,希望⼤家能够喜欢。
js实现checkbox全选和反选示例在网页中,通常会使用到复选框(checkbox)来选择多个选项。
其中,全选和反选功能是常见的需求,通过JavaScript可以实现这两个功能。
本示例将通过一个列表展示checkbox的全选和反选功能的实现方法。
以下是完整的代码示例:```html<!DOCTYPE html><html><head><title>Checkbox全选和反选示例</title></head><body><h1>Checkbox全选和反选示例</h1><h3>选择你喜欢的水果:</h3><input type="checkbox" id="selectAll" onclick="selectAll(">全选/取消全选<br><input type="checkbox" name="fruit" value="apple">苹果<br><input type="checkbox" name="fruit" value="banana">香蕉<br><input type="checkbox" name="fruit" value="orange">橙子<br><input type="checkbox" name="fruit" value="grape">葡萄<br><input type="checkbox" name="fruit" value="watermelon">西瓜<br><input type="checkbox" name="fruit" value="cherry">樱桃<br> <button onclick="inverseSelect(">反选</button><script>//全选/取消全选function selectAlvar checkboxes = document.getElementsByName("fruit");var selectAllCheckbox = document.getElementById("selectAll");for (var i = 0; i < checkboxes.length; i++)checkboxes[i].checked = selectAllCheckbox.checked;}}//反选function inverseSelecvar checkboxes = document.getElementsByName("fruit");for (var i = 0; i < checkboxes.length; i++)checkboxes[i].checked = !checkboxes[i].checked;}}</script></body></html>```在上面的代码中,首先定义了一个全选复选框,id为"selectAll",点击该复选框时调用`selectAll(`函数。
FineReport——JS⼆次开发(复选框全选)在进⾏查询结果选择的时候,我们经常会⽤到复选框控件,对于如何实现复选框全选,基本思路:
在复选框中的初始化事件中把控件加⼊到⼀个全局数组⾥,然后在全选复选框⾥对数组⾥的控件进⾏遍历赋值。
⾸先,定义两个复选框控件,⼀个⽤作全选复选框,⼀个⽤作每条信息前⾯的复选框,在全选复选框的状态改变
事件中添加如下JS⽅法:
var flag=this.getValue(); //获取当前复选框控件的状态,true /false
for(var i=0;i<window.lineboxes.length;i++){ //循环遍历每个复选控件
var cr=FR.cellStr2ColumnRow(window.lineboxes[i].options.location);
//由每个控件位置获取⾏号列号
_g().setCellValue(cr.col, cr.row, flag); //逐⼀赋值当前状态
}
在单选复选框中添加如下JS:
if (!window.lineboxes) {
window.lineboxes = []; //控件加⼊到⼀个全局数组⾥
}
lineboxes[lineboxes.length] = this;。
动态获取复选框checkbox选中个数的jquery代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});</script>我给checkbox绑定了点击事件,想获取选中的个数,上面这种写法获取失败,当我点击另外一个复选框,个数任然没变:jquery动态获取复选框checkbox选中的个数复制代码代码如下:<script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox']:checked").length);});});</script>您可能感兴趣的文章:JavaScript限定复选框的选择个数示例代码今天碰到“jquery动态获取复选框checkbox选中的个数”,首先看下面例子:复制代码代码如下:<input type="checkbox" checked="checked">python<br><input type="checkbox" checked="checked">java<br><input type="checkbox">jquery<br><input type="checkbox"><br><script src="jquery.js"></script><script>$(function(){$("input[type='checkbox']").bind("click",function(){alert($("in put[type='checkbox'][checked='checked']").length);});});。
对查询列表中的记录进行批量操作
1、实现的方法往往就是在每条记录前面加一个复选框,然后在列表下方放置一个“全选/
全不选”复选框。
2、当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”
复选框后,列表中的所有复选框都取消选中。
3、当列表中的复选框都取消选中后,“全选/全不选”复选框也要取消选中。
当列表中的复
选框都选中后,“全选/全不选”复选框也要选中。
4、得到所有选中记录的值。
这项功能其实也很简单,但往往用的时候都要重新再写一遍,于是把它总结为一个模块,记录下来,以便再用。
(1)首先是在每条记录前加入复选框,该处复选框中的值为“id|username”(示例),即选中此复选框会同时传两个值(传一个值的太简单,就不举例了),中间用|隔开,下面取值时会用到:
<input id="box" name="box" type="checkbox" value="id|username"
onclick="checkonebox()"/>
(2)然后在下方加入“全选/全不选”复选框。
<input id="checkall" t ype="checkbox" value="" onclick="checkall()"/> 全选/全不选
(3)关键实现javascript
//点击"全选/全不选"复选框,如果选中,则选中全部复选框,否则取消选中全部复选框function checkall() {
var ischecked = document.getElementById("checkall").checked;
if(ischecked) {
checkallbox();
}else {
discheckallbox();
}
}
//选中全部复选框
function checkallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = true;
}
}
//取消选中全部复选框
function discheckallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = false;
}
}
//点击某个复选框,如果所有复选框都选中,“全选/全不选”复选框也选中
//否则如果所有复选框都取消选中,“全选/全不选”复选框也取消选中function checkonebox() {
if(isallchecked()) {
document.getElementById("checkall").checked = true;
}
if(isalldischecked()) {
document.getElementById("checkall").checked = false;
}
}
//是否全部选中
function isallchecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(!boxarray[i].checked) {
return false;
}
}
return true;
}
//是否全部没有选中
function isalldischecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
return false;
}
}
return true;
}
//得到选中项的值的集合,结果为“1|小明,2|小王,3|小李”的形式function getallcheckedvalue() {
var boxvalues = "";
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
var boxvalue = boxarray[i].value;
if(boxvalues == "") {
boxvalues = boxvalue;
}else {
boxvalues = boxvalues + "," + boxvalue;
}
}
}
return boxvalues;
}
//如果只需要得到其中选中项的id值的集合,方法如下,得到的值为(1,2,3,…)
function getIds() {
var boxvalues = getallcheckedvalue();
var boxvaluesArray = boxvalues.split(",");
var ids = "";
for(var i = 0; i < boxvaluesArray.length; i++) {
var boxvalue = boxvaluesArray[i];
var boxvalueArray = boxvalue.split("|");
var id = boxvalueArray[0];
var username = boxvalueArray[1];
if(ids == "") {
ids = id;
}else {
ids = ids + "," + id;
}
}
return ids;
}
最后,总结步骤:每条记录前加复选框,加“全选/全不选”复选框,调用javascript,OK。