JQuery 中checkbox 取值问题.
程序员文章站
2022-06-12 16:10:41
...
JQuery中checkbox一直是一个缠绕已久的问题.现在贴出一段代码.很方便使用.
先上效果图:
[img]http://dl.iteye.com/upload/picture/pic/101462/a8fb3758-fca2-3e34-aece-2aba9f0ec6c1.png[/img]
先上效果图:
[img]http://dl.iteye.com/upload/picture/pic/101462/a8fb3758-fca2-3e34-aece-2aba9f0ec6c1.png[/img]
<!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>
上一篇： 按层次打印文件目录结构