jquery获取复选框checkbox的值实现方法
更新时间:2016年05月30日 10:17:46 投稿:jingxian
下面小编就为大家带来一篇jquery获取复选框checkbox的值实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
jQuery API :
each(callback)::以每一个匹配的元素作为上下文来执行一个函数。
:checked :匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
js:
1 2 3 4 5 6 7 | //js获取复选框值 var obj = document.getElementsByName( "interest" ); //选择所有name="interest"的对象,返回数组 var s= '' ; //如果这样定义var s;变量s中会默认被赋个null值 for ( var i=0;i<obj.length;i++){ if (obj[i].checked) //取到对象数组后,我们来循环检测它是不是被选中 s+=obj[i].value+ ',' ; //如果选中,将value添加到变量s中 } |
jquery:
1 2 3 4 5 | //jquery获取复选框值 var chk_value =[]; //定义一个数组 $( 'input[name="interest"]:checked' ).each( function (){ //遍历每一个名字为interest的复选框,其中选中的执行函数 chk_value.push($( this ).val()); //将选中的值添加到数组chk_value中 }); |
其中jsp页面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | <%@ page language="java" contentType="text/html" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; // basePath = http :// 127.0.0.1 : 8080 /DWR_checkbox / %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html > < head > < base href="<%=basePath%>"> < title >DWR获取浏览器页面信息</ title > < meta http-equiv = "pragma" content = "no-cache" > < meta http-equiv = "cache-control" content = "no-cache" > < meta http-equiv = "expires" content = "0" > < meta http-equiv = "keywords" content = "keyword1,keyword2,keyword3" > < meta http-equiv = "description" content = "This is my page" > <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> < script type = "text/javascript" src = "jquery-1.7.2.js" ></ script > < script type = 'text/javascript' src='<%=path%>/dwr/engine.js'></ script > < script type = 'text/javascript' src='<%=path%>/dwr/util.js'></ script > < script type = 'text/javascript' src='<%=path%>/dwr/interface/test.js'></ script > < script type = 'text/javascript' src='<%=path%>/dwr/interface/test1.js'></ script > < script type = 'text/javascript' src='<%=path%>/dwr/interface/userLogin.js'></ script > < script type = "text/javascript" > function ceshi1() { test.hasPermission(mydwr("user").value,mydwr("pass").value, // 使用$()属性获取当前页面输入的用户名和权限的值 function(data) { if(data) { mydwr("hp1").checked = "checked"; }else{ mydwr("hp1").checked = null; } document.getElementById("boolean1").value = data; }); } function ceshi2() { test.hasPermission(dwr.util.getValue("username"),dwr.util.getValue("password"),// 使用DWR中的util.js工具中的属性获取当前页面输入的用户名和权限的值,给后台.java的hasPermission方法的参数赋值,再执行此方法(不是void类型有返回值)得到个返回值。 function(data) { if(data) { document.getElementById("hp").checked = "checked"; // 使用byId()属性获取当前页面checkbox的checked属性 }else{ document.getElementById("hp").checked = null; } document.getElementById("boolean2").value = data; dwr.util.setValue("boolean3",data); //dwr.util.setValue(boolean3,"哈哈"); dwr.util.setValue(div,data); //dwr.util.setValue(body,data); }); // 用function(data)方法来处理后台.java方法执行后的返回值,存在data变量中,在执行function(data)方法的语句 } function invoke1() { dwr.engine.setAsync(false);// <!-- 默认是异步执行的true,设置成false就是同步执行 方法按顺序执行--> test1.method1( function(data){ alert(data); } ); test1.method2( function(data){ alert(data); } ); } function invoke2(){ test.getArray( function(data) { //for(var i=0;i< data.length ;i++){ // alert(data[i]); //} dwr.util.addOptions(selectid,data);//根据后台数组值填充ID为selectid的列表 }); } function invoke3(){ dwr.util.removeAllRows(tid);//根据tbody的id删除该tbody } function invoke4(){ var a = dwr .util.getText(selectid); dwr.util.setValue(tdid,a); } function show() { var name = document .getElementById("user").value; var pass = document .getElementById("pass").value; var obj = new objBean(name,pass); userLogin.alterUser(obj, function(data){ if(name == data.username && pass == data.password){ alert("success"); }else{ alert("error"); } document.getElementById("user") .value = data .username; document.getElementById("pass") .value = data .password; }); } function objBean(name,pass) { this.username = name; this.password = pass; } function go_to() { $('#first_jsp').show(); test.getInclude(function(data){ $('#first_jsp').html(data); }); } function go_to_iframe() { $("#myframe1").show(); test.getIncludeBean(function(data){ $('#myframe1').attr('src',"<%=basePath%>"+data); }); } function getInfo(){ //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值 for(var i=0;i< obj.length ;i++){ if(obj[i].checked) //取到对象数组后,我们来循环检测它是不是被选中 s+=obj[i].value+','; //如果选中,将value添加到变量s中 } alert(s == '' ? '你还没有选择任何内容!' :s); dwr.util.setValue(tdid,s); //jquery获取复选框值 var chk_value =[];//定义一个数组 $('input[ name = "interest" ]:checked').each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数 chk_value.push($(this).val());//将选中的值添加到数组chk_value中 }); alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); dwr.util.setValue(checkboxInfo,chk_value); } </script> </ head > < body id = "body" > < form > < table id = "tableid" border = "1" align = "center" > < tr >< td >用户名:</ td >< td >< input id = "user" type = "text" name = "username" /></ td ></ tr > < tr >< td >密码:</ td >< td >< input id = "pass" type = "text" name = "password" /></ td ></ tr > < tr > < td >< input id = "getInfo" type = "button" value = "获取信息" onclick = "show()" /></ td > < td >< input type = "reset" value = "重置" /></ td > </ tr > < tbody id = "tid" > < tr > < td colspan = "2" > < input id = "hp1" type = "checkbox" name = "hpname" >测试权限< br > < input type = "button" name = "button" value = "测试1" onclick = "ceshi1()" > 返回值:< input id = "boolean1" type = "text" /> </ td > </ tr > < tr > < td > < input id = "hp" type = "checkbox" name = "hpname" >测试权限< br > < input type = "button" name = "button" value = "测试2" onclick = "ceshi2()" > </ td > < td > 返回值:< input id = "boolean2" type = "text" /> dwr.util.setValue:< input id = "boolean3" type = "text" /> < div id = "div" > 这是一个div标签</ div > </ td > </ tr > </ tbody > < tr > < td id = "tdid" colspan = "2" >修改此行值</ td > </ tr > </ table > </ form > < input type = "button" name = "button" value = "异步调用测试" onclick = "invoke1()" > < input type = "button" name = "button" value = "加载Array值" onclick = "invoke2()" > < input type = "button" name = "button" value = "删除所有行" onclick = "invoke3()" > < input type = "button" name = "button" value = "修改行值" onclick = "invoke4()" > < div > < select id = "selectid" ></ select > </ div > < input type = "button" name = "button" value = "框架(iframe)中加载bean.jsp" onclick = "go_to_iframe()" > < input type = "button" name = "button" value = "DIV中加载first.jsp" onclick = "go_to()" > < iframe id = "myframe1" style = "width:500;height:200;border:10px;padding:0px;display:none" src = "" ></ iframe > < div id = "first_jsp" style = "width: 100%; height: auto; display:none" ></ div > < form > < input type = "checkbox" name = "interest" value = "VC" />VC < input type = "checkbox" name = "interest" value = "VB" />VB < input type = "checkbox" name = "interest" value = "VFoxpro" />VFoxpro < input type = "checkbox" name = "interest" value = "VJava" />VJava < input type = "checkbox" name = "interest" value = "BC" />BC < input type = "checkbox" name = "interest" value = "Cobol" />COobol < input type = "checkbox" name = "interest" value = "Java" />Java < input type = "checkbox" name = "interest" value = "Delphi" />Delphi < input type = "button" value = "获取复选框值" onclick = "getInfo()" > </ form > < div id = "checkboxInfo" style = "width: 100%; height: auto; display:block" ></ div > </ body > </ html > |
以上这篇jquery获取复选框checkbox的值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Slider Revolution插件是一款非常强大的插件了,我们可以利用它来制作出各种效果并且还支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器等等效果,具体我们来看看。2015-06-06jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts绘制简单2D折线图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制折线图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论