`

jquery获取复选框checkbox的值

阅读更多

jQuery API :

each(callback) :以每一个匹配的元素作为上下文来执行一个函数。

 

:checked :匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

 

//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获取复选框值    
            var chk_value =[];//定义一个数组    
            $('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数    
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
            });

 

<%@ 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>

 

  • 大小: 47.3 KB
分享到:
评论

相关推荐

    jquery获取复选框checkbox的值的简单实现方法

    在这个过程中,我们使用jQuery的`.val()`方法获取每一个复选框的`value`属性值,并通过`push()`方法将这些值添加到一个预先定义的数组中。这种方式更加简洁明了,并且利用了jQuery提供的方法来简化操作。 最后,...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery获取复选框checkbox的值实现方法

    //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值 for(var i=0;i&lt;obj.length;i++){ ...

    jQuery多级复选框checkbox选中代码

    本教程主要探讨的是如何使用jQuery实现多级复选框(checkbox)的功能,包括水平横向、垂直纵向两种排列方式,并且提供了三种不同的样式供选择。通过这个项目,我们可以学习到如何用jQuery控制复选框的状态,以及如何...

    jQuery多级复选框checkbox选中代码.zip

    本文将深入探讨如何使用jQuery实现多级复选框的功能,通过分析提供的"jQuery多级复选框checkbox选中代码.zip"中的示例,我们将了解其实现原理及应用。 首先,"index.html"是项目的入口文件,它包含了页面的基本结构...

    jQuery美化版复选框checkbox,自定义形状和颜色

    对于jQuery自定义复选框checkbox和单选框Radiobox,我们已经有介绍过不少了,比如9款迷人样式的CSS3自定义Checkbox复选框和HTML5/CSS3开关按钮 立体3D按钮。今天要介绍的是一款基于jQuery的美化版复选框,它的特点是...

    jquery 复选框组件

    **jQuery 复选框组件详解** 在Web开发中,复选框(Checkbox)是一种常见的用户交互元素,用于让用户从多个选项中选择一个或多个。jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和...

    jQuery自定义美化复选框checkbox样式

    在"jQuery自定义美化复选框checkbox样式"这个项目中,我们可以看到以下几个关键知识点: 1. **CSS样式定义**:CSS文件(可能位于`css`目录下)用于定义复选框的样式。这包括但不限于边框、背景色、尺寸、过渡效果等...

    jquery实现 复选框 选中和不选中 美化复选框

    在网页设计中,复选框(Checkbox)是用户界面中常用的一种元素,它允许用户对多个选项进行选择或取消选择。然而,原生的HTML复选框在样式上可能较为简单,无法满足现代网页设计美观的需求。jQuery作为一个强大的...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    jquery动态复选框取值

    在本主题中,我们将深入探讨如何在jQuery中处理动态生成的复选框,并获取它们的值。复选框是HTML表单中常见的一种元素,用于让用户选择一个或多个选项。 一、jQuery基本概念 jQuery通过一个简洁的语法,让...

    jQuery如何判断checkbox(复选框)是否被选中

    在探讨如何使用jQuery判断复选框(checkbox)是否被选中的过程中,我们首先需要理解复选框的基本属性以及jQuery操作DOM元素的方式。复选框在HTML中被定义为`&lt;input type="checkbox"&gt;`,当它被选中时,其`checked`属性...

    jQuery分别获取选中的复选框值

    本文将深入探讨如何使用jQuery来获取选中的复选框(checkbox)的值,同时也涵盖jQuery对其他HTML元素如下拉框(select)、单选按钮(radio)的处理方法。 首先,让我们关注标题提及的主题——"jQuery分别获取选中的...

    jQuery自定义美化复选框checkbox样式.zip

    本资源"jQuery自定义美化复选框checkbox样式.zip"提供了一个利用 jQuery 实现的复选框(checkbox)美化方案。这个压缩包包含了一些必要的文件,如 HTML、CSS 和可能的 JavaScript 文件,使你可以轻松地将美观的复选...

    jQuery树形复选框插件.zip

    《jQuery树形复选框插件的深度解析与应用》 在Web开发中,为了提供用户友好的交互体验,我们经常需要实现各种各样的UI组件。其中,树形结构的复选框是一种常见且实用的功能,它允许用户以层级方式选择或取消选择一...

    jquery无限极复选框下拉树

    **jQuery无限极复选框下拉树**是一种交互式的用户界面元素,常用于在Web应用中展示层次结构的数据,如组织结构、目录树或者复杂的分类系统。这种组件允许用户通过展开和折叠节点来查看和选择多级选项。下面将详细...

    复选框checkbox的jquery插件

    复选框checkbox的jquery插件, 用法:if($("#check").check()) $("#check").check(true);

    动态获取复选框checkbox选中个数的jquery代码[总结].pdf

    在软件开发过程中,尤其是涉及到用户交互界面时,动态获取复选框(Checkbox)的状态是非常常见的需求。复选框常用于让用户选择多个选项,而实时获取选中状态的数量可以帮助开发者了解用户的实时选择。本文将深入探讨...

    HTML复选框美化,Jquery模拟多选框(checkbox)

    这就催生了复选框美化的需求,通过CSS和JavaScript库如jQuery来改变复选框的外观和交互效果。 复选框美化的基础是利用CSS来覆盖默认的浏览器样式。HTML的复选框由`&lt;input type="checkbox"&gt;`标签创建,但其默认样式...

Global site tag (gtag.js) - Google Analytics