您的位置: 首页  >  IT文章  >  JQuery 中checkbox 取值有关问题

JQuery 中checkbox 取值有关问题

分类: IT文章 • 2023-03-22 16:41:52
JQuery 中checkbox 取值问题.
        JQuery中checkbox一直是一个缠绕已久的问题.现在贴出一段代码.很方便使用.

先上效果图:
JQuery 中checkbox 取值有关问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action=""  >
	<div class="item">
		<table border="1" >

		<tr>
			<td>省级地区</td>
			<td>市级地区</td>
			<td>县级地区</td>
		</tr>
			<tr>
			
			<td rowspan="11"><input type="checkbox" id="Areacheckbox" name="areaCB" value="河北省" />河北省</td>

			
				<td rowspan="4"><input type="checkbox" id="Areacheckbox" name="areaCB" value="石家庄"  />石家庄</td>
				
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="无极" />无极</td>
			</tr>
			<tr>
			
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="正定" />正定</td>
			</tr>
			<tr>

			
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="新乐" />新乐</td>
			</tr>
			<tr>
			
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="藁城" />藁城</td>
			</tr>
			<tr>
			
			
				<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="唐山"  />唐山</td>

				
				<td></td></tr><tr>
			
			
				<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="张家口"  />张家口</td>
				
				<td></td></tr><tr>
			
			
				<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="沧州"  />沧州</td>
				
				<td></td></tr><tr>
			
			
				<td rowspan="2"><input type="checkbox" id="Areacheckbox" name="areaCB" value="保定"  />保定</td>
				
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="曲阳" />曲阳</td>

			</tr>
			<tr>
			
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="定州" />定州</td>
			</tr>
			<tr>
			
			
				<td rowspan="1"><input type="checkbox" id="Areacheckbox" name="areaCB" value="廊坊"  />廊坊</td>
				
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="霸州" />霸州</td>

			</tr>
			<tr>
			
			
				<td rowspan="1"><input type="checkbox" id="Areacheckbox" name="areaCB" value="邢台"  />邢台</td>
				
			<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="沙河" />沙河</td>
			</tr>
			<tr>
			
			
			<tr>
			
			<td rowspan="0"><input type="checkbox" id="Areacheckbox" name="areaCB" value="省外地区" />省外地区</td>

			
			<td></td><td></td></tr><tr>
			
			<tr>
			
	</table>
	</div>
	<input type="button" value="选择" name="btn"  />
	
	<input id="tags" style="width:500px;" type="text"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">引入jquery</script>

	<script type="text/javascript">
	  	var checkBox = $('div.item input[type=checkbox]'),
	  			tagsBox = $('#tags');
	  	checkBox.change(function(){
	  		var s=[];
	  		for(var i=0;i<checkBox.length;i++)
	  			if(checkBox[i].checked) s.push(checkBox[i].value);	
	  		tagsBox.val(s.join('，'));
	  	});
	</script>

	</form>
</body>
</html>


相关推荐