jquery點擊checkbox復選框仿招聘人才網彈出工作地點選擇區域



124 493 165



特效描述:復選框 彈出工作地點 彈出選擇區域,

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.selectlayer.js"></script>

3. HTML代碼

<div style="width:260px;margin:20px auto;">
	<input name="district_cn"  id="district_cn" type="text" value="請選擇所在地區"  readonly="true" class="sltinput" />
	<input name="citycategory" id="citycategory" type="hidden" value="" />
	<div style="display:none" id="sel_district">
		<div class="OpenFloatBoxBg"></div>
		<div class="OpenFloatBox">
			<div class="title">
				<h4>請選擇工作地區</h4>
				<div class="DialogClose" title="關閉"></div>
			</div>
			<div class="tip">可多選,最多選擇8項</div>
			<div class="content">
				<div class="txt">
					<div class="item" id="593">
						<label title="新塘" class="titem"><input  type="checkbox" value="593"  title="新塘" class="b" />新塘</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="598">
						<label title="增城" class="titem"><input  type="checkbox" value="598"  title="增城" class="b" />增城</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="564">
						<label title="番禺" class="titem"><input  type="checkbox" value="564"  title="番禺" class="b" />番禺</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="589">
						<label title="南沙" class="titem"><input  type="checkbox" value="589"  title="南沙" class="b" />南沙</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="617">
						<label title="蘿崗" class="titem"><input  type="checkbox" value="617"  title="蘿崗" class="b" />蘿崗</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="618">
						<label title="黃埔" class="titem"><input  type="checkbox" value="618"  title="黃埔" class="b" />黃埔</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="599">
						<label title="花都" class="titem"><input  type="checkbox" value="599"  title="花都" class="b" />花都</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="590">
						<label title="從化" class="titem"><input  type="checkbox" value="590"  title="從化" class="b" />從化</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="572">
						<label title="白云" class="titem"><input  type="checkbox" value="572"  title="白云" class="b" />白云</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="575">
						<label title="廣州市區" class="titem"><input  type="checkbox" value="575"  title="廣州市區" class="b" />廣州市區</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="588">
						<label title="佛山" class="titem"><input  type="checkbox" value="588"  title="佛山" class="b" />佛山</label>
						<div class="sitem"></div>
					</div>
					<div class="item" id="587">
						<label title="東莞" class="titem"><input  type="checkbox" value="587"  title="東莞" class="b" />東莞</label>
						<div class="sitem"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="txt">
					<div class="selecteditem"></div>
				</div>
				<div class="txt">
					<div align="center"><input type="button"  class="but80 Set" value="確定" /></div>
				</div>
			</div>
		</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 浮動菜單 浮動導航 提示框/彈出層 城市選擇 城市選擇器 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子