js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据

时间：2025-02-20 21:59:10

servlet服务器后端根据前台form的标签的name接收数据

如:

input:text

input:radio

select

等，只需要设置name属性,并且给value属性赋值,后台自动接收(这里建议servlet使用String类型变量接收，在服务器端做解析,封装为其他类型)


input:checkbox属性比较特殊，需要使用js函数设置value值。

关于动态添加的节点,需要使用live绑定事件,用bind会无效。


以下提供一个demo参考：


<html>
	<head>
		<title>radio checkbox select</title>
		<style type="text/javascript">	
		</style>
		<script type="text/javascript" src="jquery-1.4.">
		</script>
		<script>
			$(function(){
				//为所有的checkbox绑定change事件,方便获取value
				$(":checkbox").live("change",function(event){
					setChkVal(event);
				});
				
				//仅仅为了测试动态添加节点
				$(":radio").bind("change",function(event){
					setRadVal(event);
				});
				
				$("select").bind("change",function(event){
					alert($().val());
				});
			});
			
			function setRadVal(event){
				var dom = ;
				var id = $(dom).attr("id");
				var val = $(dom).val();
				var chk = $("#"+id).attr("checked");
				if(chk == true && val === "1"){
					$("div:eq(1)").empty();
					$("div:eq(1)").append(
					"<input type='checkbox' id='fav1' name='fav1' value='0'>"+
					"<label for='fav1' style='cursor:hand'>html</label>"
					);
					$("div:eq(1)").append("<input type='checkbox' id='fav2' name='fav2' value='1'>"+
					"<label for='fav2' style='cursor:hand'>css</label>"
					);
					return;
				}else{
					$("div:eq(1)").empty();
					if(val === "0" && chk == true){
						$("div:eq(1)").append("<input type='checkbox' id='fav1' name='fav1' value='0'>"+
						"<label for='fav1' style='cursor:hand'>java</label>"
						);
						$("div:eq(1)").append("<input type='checkbox' id='fav2' name='fav2' value='0'>"+
						"<label for='fav2' style='cursor:hand'>javascript</label>"
						);
						$("div:eq(1)").append("<input type='checkbox' id='fav3' name='fav3' value='0'>"+
						"<label for='fav3' style='cursor:hand'>sql</label>"
						);
						$("div:eq(1)").append("<input type='checkbox' id='fav4' name='fav4' value='0'>"+
						"<label for='fav4' style='cursor:hand'>no-sql</label>"
						);	
					}
				}
			}
			
			function setChkVal(event){
				var dom = ;
				var id = $(dom).attr("id"); 
				var chk = $("#"+id).attr("checked");
				if(chk == true){
					$("#"+id).val("1");
				}else{
					$("#"+id).val("0");
				}
				//alert($("#"+id).val());
			}
		</script>
	</head>
	<body>
		<h1>radio</h1>
		<div>
		性别：
		<input type="radio"  name="sex" value="0" checked="checked"><label for="male" style="cursor:hand">男</label>
		<input type="radio"  name="sex" value="1"><label for="female" style="cursor:hand">女</label>
		</div>
		<br/>
		<h1>checkbox</h1>
		爱好：
		<div>
		<input type="checkbox"  name="fav1" value="0" checked=tr><label for="fav1" style="cursor:hand">java</label>
		<input type="checkbox"  name="fav2" value="0"><label for="fav2" style="cursor:hand">javascript</label>
		<input type="checkbox"  name="fav3" value="0"><label for="fav3" style="cursor:hand">sql</label>
		<input type="checkbox"  name="fav4" value="0"><label for="fav4" style="cursor:hand">no-sql</label>
		</div>
		<br/>
		<h1>select</h1>
		<div>
		<label>城市：</label><select name="city">
			<option value="0" >南京</option>
			<option value="1" >苏州</option>
			<option value="2" >上海</option>
			<option value="3" >普罗旺斯</option>
		</select>
		</div>
	</body>
</html>


相关文章