<!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">
<link rel="stylesheet" type="text/css" href="jquery-selectbox.css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-selectbox.js"></script>
<title>Insert title here</title>
<script language="javaScript">
$(document).ready(function(){
$("#select_box").selectboxs();
});
</script>
</head>
<body>
<!-- 自定义div
下面input checkbox的name必须与div的id相同
提交的时候，后台自动生成一个隐藏框，name为自定义div的id后面跟上_hdn
放在本例中就是select_box_hdn,
提交后用该名字去取数据即可
其中的数据存放方式是用逗号隔开
-->
<div id="select_box">
<table>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="1" onblur="s.hiddenList()"/> <span>杭州</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="2" onblur="s.hiddenList()"/> <span>湖州</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="3" onblur="s.hiddenList()"/> <span>长兴</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="4" onblur="s.hiddenList()"/> <span>北京</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="5" onblur="s.hiddenList()"/> <span>上海</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="6" onblur="s.hiddenList()"/> <span>香港</span></label>
</td></tr>
<tr><td style="width:180px;">
<label><input type="checkbox" name="select_box" onclick="s.changeSelected(this,event);" value="7" onblur="s.hiddenList()"/> <span>澳门</span></label>
</td></tr>
</table>
</div>
</body>
</html>
jquery模拟div多选checkbox下拉框
5星 · 超过95%的资源 需积分: 10 115 浏览量
2011-08-05
17:06:25
上传
评论 4
收藏 29KB RAR 举报 
jQuery checkbox多选下拉框.rar （4个子文件） 
selectbox 
selectboxSample.html 3KB
jquery-1.4.4.min.js 77KB jquery-selectbox.css 622B jquery-selectbox.js 4KB
- 1
- 2
- 3
- 4
- 5
- 6
前往页