jquery获取复选框checkbox的值的简单实现方法
jQuery API :
each(callback) :以每一个匹配的元素作为上下文来执行一个函数。
:checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
js:
//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:
//jquery获取复选框值
var chk_value =[];//定义一个数组
$('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数
chk_value.push($(this).val());//将选中的值添加到数组chk_value中
});
其中jsp页面代码
<%@ 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的值的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
jquery获取所有选中的checkbox实现代码
获取所有name为spCodeId的checkbox var spCodesTemp = ""; $('input:checkbox[name=spCodeId]:checked').each(function(i){ if(0==i){ spCodesTemp = $(this).val(); }else{ spCodesTemp += (","+$(this).val()); } }); $("#txt_spCodes").val(spCod
-
jQuery判断checkbox选中状态
前言 神奇的JQuery怎么设置checkbox状态时好时坏?明明同一行代码,断点跟踪确实执行了,但是有时候好使,有时候却没有生效.毕竟对JS不是很熟悉,只是通过JS来处理前端HTML的标签的状态设置时,通过JQuery有时候会更方便些的,但是发现更不好办. 今天尝试实现checkbox全选.全不选功能,与App开发中的效果是一样的,勾选全选则将所有的选项都选中:同样取消勾选某个子项也将全选设置为非选中状态:所有子选项都为选中状态时,将全选设置为选中状态. 由于对JS不是很熟悉,于是尝试各种百度
-
jquery获取复选框checkbox的值实现方法
jQuery API : each(callback)::以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值
-
jQuery 更改checkbox的状态,无效的解决方法
今天写页面遇到复选框动态全选或全不选问题,正常写法如下: $("#tb").find("input[type='checkbox']").attr("checked","checked"); but!第一次点击全选按钮input显示对勾,第二次就不行了,查了下有建议用prop的,亲测有效.那两者有啥区别呢? jQuery函数attr()和prop()的区别: 1.操作对象不同 "attr"和"pr
-
jquery判断checkbox是否选中及改变checkbox状态的实现方法
jquery判断checked的三种方法: .attr('checked): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false .prop('checked'): //16+:true/false .is(':checked'): //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几种写法: 所有的jquery版本都可以这样赋值: // $("#cb1&qu
-
JQuery点击行tr实现checkBox选中的简单实例
$(function () { //除了表头(第一行)以外所有的行添加click事件. $("tr").first().nextAll().click(function () { //为点击的这一行切换样式bgRed里的代码:background-color:#FF0000; $(this).children().toggleClass("bgRed"); //判断td标记的背景颜色和body的背景颜色是否相同; if ($(this).children().css
-
jQuery CSS3自定义美化Checkbox实现代码
效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的. 接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果. 先来看看HTML代码: <div class="wrapper"> <ul> <li> <p>Gender:</p> </li> &
-
利用jQuery实现CheckBox全选/全不选/反选的简单代码
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
-
jquery获取复选框checkbox的值的简单实现方法
jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值
-
Jquery获取复选框被选中值的简单方法
复制代码 代码如下: <input type="button" id="btn5" value="获得选中的所有值"><input type="text" name="dd" id="dd" size="50" />$("#btn5").click(function(){ var str="&q
-
jquery获取复选框被选中的值
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> &l
-
jQuery获取复选框选中的当前行的某个字段的值
废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script src="js/jquery.js"></script> <s
-
jQuery操作复选框(CheckBox)的取值赋值实现代码
1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项: $('input:checkbox').each(function() { if ($(this).attr('c
-
jQuery获取复选框被选中数量及判断选择值的方法详解
本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&
-
jquery获取复选框的值的简单实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> </style>
-
动态获取复选框checkbox选中个数的jquery代码
今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check
-
jquery对复选框(checkbox)的操作汇总
jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项 $('input:checkbox').each(funct