QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jQuery全选列表穿梭框代码

jQuery全选列表穿梭框代码

jQuery文字列表全选,点击左右箭头按钮控制穿梭框列表代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

3、body引入HTML代码

<div class="selection-container">
	<div class="select-box left">
		<div class="select-box-title">
			<input type="checkbox" class="checkbox-all" id="checkbox-all1" />
			<label for="checkbox-all1"></label>
			<span>列表一</span>
		</div>
		<div class="select-content">
			<ul class="unselect-ul">
				<li>
					<input type="checkbox" class="checkboxs"  id="tyue-checkbox-blue1" />
					<label for="tyue-checkbox-blue1"></label>
					<span>备选项1</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue2" />
					<label for="tyue-checkbox-blue2"></label>
					<span>备选项2</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue3" />
					<label for="tyue-checkbox-blue3"></label>
					<span>备选项3</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue4" />
					<label for="tyue-checkbox-blue4"></label>
					<span>备选项4</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue5" />
					<label for="tyue-checkbox-blue5"></label>
					<span>备选项5</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue6" />
					<label for="tyue-checkbox-blue6"></label>
					<span>备选项6</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue7" />
					<label for="tyue-checkbox-blue7"></label>
					<span>备选项7</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue8" />
					<label for="tyue-checkbox-blue8"></label>
					<span>备选项8</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="arrows-box">
		<div class="arrow-btns">
			<button class="arrow-btn right">
				<svg class="icon icon-seach" aria-hidden="true">
					<use xlink:href="#icon-com-dajiantouyou"></use>
				</svg>
			</button>
			<button class="arrow-btn left">
				<svg class="icon icon-seach" aria-hidden="true">
					<use xlink:href="#icon-com-dajiantouzuo"></use>
				</svg>
			</button>
		</div>
	</div>
	<div class="select-box right">
		<div class="select-box-title">
			<input type="checkbox" class="checkbox-all" id="checkbox-all2" />
			<label for="checkbox-all2"></label>
			<span>列表二</span>
		</div>
		<div class="select-content">
			<ul class="selected-ul">
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue9" />
					<label for="tyue-checkbox-blue9"></label>
					<span>备选项9</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue10" />
					<label for="tyue-checkbox-blue10"></label>
					<span>备选项10</span>
				</li>
				<li>
					<input type="checkbox" class="checkboxs" id="tyue-checkbox-blue11" />
					<label for="tyue-checkbox-blue11"></label>
					<span>备选项11</span>
				</li>
			</ul>
		</div>
	</div>
</div>

<!--穿梭框方法-->
<script src="js/index.js"></script>

<!--图标调用,可忽略-->
<script src="js/iconfont.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
时时乐上海开奖结果 www.468707.com-顶呱刮彩票种类| www.149101.com-优信彩票邀请码最新| www.487073.com-彩6彩票app娱乐| www.621611.com-怎样买快三分分彩| www.722798.com-体彩店开业宣传语| www.819372.com-福彩360杀号定胆| www.907686.com-彩票从网上怎么购买| www.977466.com-上海彩妆店-| www.gz2.cc-安徽快三开奖遗漏| www.td84.com-彩票预测神器这么准| www.251795.com-两元彩票app| www.343946.com-体育彩票7位数历史| www.444799.com-金手指彩票软件下载| www.569807.com-彩88彩票现场开奖| www.659023.com-体育7星彩票开奖| www.23936.cc-启航国际网赌彩票| www.24155.com-乐彩论坛3d字谜图| www.70974.com-体彩大乐透怎么玩| www.28527.cc-圆角分彩票平台| www.649.cm-乐透型彩票指标算法| www.99vo.com-王阳彩票-| www.47fy.com-爱乐透买彩票可靠吗| www.5979.net-19050体彩开奖| www.s04.cc-彩票33平台-| www.782817.com-六6开彩开奖记录| www.66708.com-彩票风釆网-| www.16vy.com-排三开奖乐彩网| www.516.cm-福利彩票积分扫一扫| www.c91.in-中彩乐下载-| www.65cb.com-双色球彩币预测免费| www.2364.shop-七彩神仙鱼论坛| www.21496.com-彩票网站突然进不去| www.yb16.com-福彩3d34期-| www.9996.vip-体彩真还是福彩真| www.473944.com-极速快三必出| www.173203.com-江苏快三下载| www.611645.com-双彩网论坛app| www.706960.com-天下天彩票免费大全| www.781782.com-分分彩挂机方案吧| www.866595.com-星期五那些彩票开奖| www.871647.com-利彩网站-| www.502925.com-爱投网与口袋彩店| www.61245.com-网络售彩是否合法| www.289234.com-三分彩开奖结果查询| www.223786.com-体彩app停售| www.065613.com-彩虹岛水果兑换码| www.407618.com-霸皇港彩网址| www.088422.com-雪绿足彩比分直播| www.480008.com-彩票极速赛车计划| www.588243.com-迷彩虎app-| www.671937.com-和彩宝合法吗| www.046321.com-51彩票登录-| www.8oh.cc-买彩票翻身-| www.032335.com-3d试机号牛彩网| www.114717.com-银河彩票网站bb| www.663490.com-乐彩彩票平台代理| www.750413.com-时时彩攻略技巧集锦| www.852661.com-中国体彩在线| www.948693.com-彩票公益资金分配流| www.cai3921.com人人彩-| www.sk95.com-重庆时时彩开奖助手| www.dp81.com-网路快三-| www.979223.com-官方福利彩票网站| www.qz80.com-福彩双色球500期| www.020.net-彩票单双计划网站| www.55082.com-足彩滚球大小球公式| www.162792.com-甘肃快三豹子| www.268930.com-go彩票砍龙可信吗| www.376542.com-百盈快三和直播吧| www.546855.com-彩票卡时间漏洞软件| www.671578.com-彩礼一万-| www.791018.com-好彩泰免多少钱| www.887665.com-阿里彩票被坑| www.999688.cc-100彩票网-| www.mp79.com-富贵时时彩最快开奖| www.287887.com-粤彩网合法吗| www.492368.com-兼职代买时时彩| www.643298.com-福彩收税-| www.864585.com-掌中彩靠谱吗| www.fs2.com-时时彩输了追回案例| www.982252.com-印象彩票赛车| www.n28.com-移动梦网彩票频道| www.066.in-大只500彩票分析| www.ms28.com-七乐彩怎样玩法| 网易彩票www.093wy.com| www.164094.com-时时彩后三容错技巧| www.229006.com-广州哪里有好彩烟| www.059188.com-中国彩票排行榜| www.324721.com-福彩3d太阳红谜语| www.789406.com-竞彩足球旧版本| www.19977.com-481彩票娱乐| www.1094.cc-足彩竞彩漏洞| www.443929.com-7意彩app下载| www.980769.com-附近彩票店-| www.128043.com-图片彩虹大全| www.130504.com-汇彩网骗局揭秘| www.299226.com-河北快三推荐的| www.637538.com-彩虹隐身无人机| www.860604.com-全国快三开奖时间| www.75vo.com-5d彩超图片-| www.190336.com-快三开奖有规律吗| www.455261.com-彩票杀号技巧大乐透| www.554613.com-体育彩票入门知识| www.636908.com-emoji彩虹旗| www.698047.com-彩票联盟彩吧2版| www.775365.com-时时彩回本心态| www.850448.com-网上大发快三能玩吗| www.916908.com-永盛彩票网下载| www.968614.com-彩6计划群-| www.sr0.cc-重庆时彩官网开奖| www.352700.com-给彩票平台黑了| www.360043.com-易记彩票破解方法| www.937.cc-河北快三手机版| www.34266.cc-上海体彩网11选5| www.019410.com-826网络彩票| www.522089.com-七乐彩查询号码| www.637996.com-竞彩大奖方案| www.780328.com-福利彩票咋申请| www.856508.com-彩票app开发极云| www.908370.com-怎么玩手机版快彩| www.961346.com-竞彩猫官网任九擂台| 500万彩票www.96386r.com| www.fo43.com-大发快三漏洞分析| www.tp20.cc-快三带线走势图| www.271500.com-好彩1怎么玩| www.359687.com-彩票店软件下载苹果| www.457739.com-恒彩和都都装饰| www.543342.com-福彩一句子定三码| www.597252.com-精华布衣1多彩网图| www.656302.com-顶尖的彩票预测软件| www.709761.com-有彩票店的微信号码| www.770873.com-时时彩中奖图片| www.826038.com-江苏快三qq群骗局| www.879963.com-陕西省福彩兑奖中心| www.936201.com-够力七星彩解梦大全| www.987387.com-6234天天彩票| www.kk4.cc-快乐彩牛-| www.032777.com-500彩票没邀请码| www.120819.com-快三对子号组合表| www.200249.cc-下载彩票开奖大厅| www.275881.com-重庆时时彩倍投计划| www.341990.com-武汉体彩中心电话| www.732296.com-北京人结婚彩礼钱| www.887342.com-彩票算赌博吗| www.96lc.com-竞彩足球总交易| www.fm89.com-大发快三作弊| www.771784.com-时时彩计划软件下载| www.916772.com-500彩票信得过吗| www.07cs.com-充一元送彩金| www.127311.com-7k7k彩票-| www.218302.com-彩神8注册-| www.819228.com-三分赛车彩票技巧| www.943032.com-南宁市福彩中心| www.50.cm-福彩三d天天彩报纸| www.82yq.com-福彩3d算法必中| www.163945.com-彩票大底-| www.318592.com-体彩146前后关系| www.780768.com-app彩票打开| www.954414.com-浙江彩票网12选5| www.db37.com-湖北快三软件| www.zl85.com-大发彩票设局害人的| VIP彩票www.312876.com| 大赢家彩票平台www.307683.com| www.4tc.com-双色球多彩贵州|