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.924545.com-彩票最高中奖纪录| www.920813.com-七彩网是正规的吗| 8号彩票www.81520u.com| www.237244.com-免费彩票大全| www.xy16.com-d9彩票官方网站| www.97lk.com-送彩金彩票网址大全| www.398016.com-网易彩票七星彩| www.307304.com-韩国有快三么| www.3997.in-澳门合法彩票网站| www.050419.com-彩票自助机投放规定| www.488579.com-天天彩票网投| www.629433.com-佳能彩色打印机价格| www.744899.com-新版本彩票77| www.846353.com-龙山彩票站-| www.932628.com-福利彩票作弊事件| www.995205.com-足彩怎么看胜负平| www.fi37.com-全天最准大发快三| www.l10.org-大发云旗下彩票平台| www.598486.com-七星彩历史数据表格| www.50114.cc-体彩p3试机号走势| www.770776.com-彩票网站怎么刷钱| www.112338.com-棋牌抽奖送彩金| www.351656.com-彩客竞彩体育下载| www.463546.com-91彩票联盟下载| www.567652.com-竞彩之家代理违法吗| www.669661.com-什么彩票5位数| www.919632.com-开发一个彩票软件| www.145997.com-a81cc彩票-| www.233448.com-北京pk拾彩票平台| www.352276.com-金牛彩票真假| www.287395.com-香港供彩社区| www.jb16.com-辽宁福彩官网| www.347780.com-彩虹的微笑-| www.901209.com-江苏快三和值跨度图| www.267273.com-彩票计划时时彩| www.941006.com-彩票推广拉人话术| www.un5.com-六彩彩票123| www.yw62.com-11选五爱彩乐辽宁| www.1726.vip-开户送彩金-| www.36846.com-好运来彩票投注平台| www.030006.com-内蒙体彩十一选五| www.231279.com-快三豹子追号计算器| www.356148.com-雷霆vs爵士彩票| www.679624.com-至尊彩平台骗局| www.771624.com-娱乐彩票软件下载| www.851182.com-时时彩qq报号群| www.925167.com-一分分彩-| www.983847.com-福利彩票咋查中奖| www.cn68.com-彩界联盟-| www.a66.cn-职业彩民怎么赚钱| www.24oy.com-diy手机彩膜机| www.6889.bid-hct122好彩头| www.ad34.com-北京彩票11选五| www.002092.com-七乐彩奖励表| www.565157.com-福彩福彩3d好彩网| www.739098.com-五福彩票软件| www.882890.com-宏达彩票是真的吗| www.995144.com-中福快三怎套钱| www.td11.com-彩色的造句-| www.78sx.com-泊利彩票平台可靠不| www.102360.com-k彩福地彩票客服| www.250597.com-爱彩彩票原版| www.346369.com-彩票大i赢家| www.429448.com-六福彩是什么意思| www.rq88.cc-网上七星彩去哪买| www.080.host-体彩排列三藏机图谜| www.0er.com-彩客网胜平负14场| www.239989.com-彩神x下载网址| www.08123.cc-福彩3d模拟器| www.330506.com-今日选四天天彩开奖| www.389976.com-体彩票开奖号码| www.567932.com-彩票网店宣传方法| www.702156.com-505彩票有风险吗| www.612115.com-足彩吧狗万-| www.680657.com-彩票巴巴手机版下载| www.um41.com-福彩3d分析汇总| www.237314.com-嘉兴福彩网-| www.261653.com-中国体育彩票6+1| www.826028.com-彩经网3d杀号最准| www.5244.cc-经彩网-| www.53178.com-竞彩足球app源码| www.135431.com-微信怎样买彩票| www.229799.com-福彩技巧-| www.601086.com-彩客网手机客户端| www.763727.com-彩神大发软件| www.769106.com-钻石团队彩票计划师| www.73544.com-时时彩博-| www.793882.com-利民彩票正规吗| www.gn00.com-彩礼超过贩卖人口| www.599790.com-彩票大奖记录| www.678735.com-电工制作彩票网| www.797827.com-三d分析预测彩吧| www.ki88.com-大连体彩-| www.65ae.com-七月星彩结果奖结果| www.559569.com-体彩七位数兑奖规则| www.7905.me-易彩分分彩是真是假| www.444177.com-福利彩票坐标走试图| www.618474.com-福彩双色球30期| www.744743.com-利用彩票当庄| www.906823.com-申请福利彩票店难吗| www.fk57.com-浙江快乐彩开奖结果| www.23sq.com-澳门彩票最新投注网| www.2406.org-我要找福彩3d| www.12599.com-彩77分分时时彩| www.237817.com-福利彩票选号器| www.878393.com-时时彩任四技巧| www.26007.com-彩票刷流水怎么刷| www.bo94.com-网易彩票应用软件| www.12536.cc-洛阳体彩兑奖中心| www.130661.com-火箭彩票安卓apk| E彩堂www.43818u.com| www.751178.com-今期四不象彩图| www.869012.com-七星彩啥是对数| www.954978.com-动物彩票开奖走势图| www.qu15.com-比特币一分彩| www.565903.com-智慧彩票ios| www.966849.com-保时捷游戏彩票| www.dq6.cc-500彩票彩种| www.52mj.com-时时彩五星一码| www.024706.com-竞彩双平什么意思| www.22532.cc-东北娶媳妇彩礼| www.274411.com-腾讯分分彩登录窗口| www.2190.vip-迅盈彩票注册邀请码| www.10151.com-大乐透中彩网擂台赛| www.537389.com-彩9彩票邀请码| www.437349.com-彩乐园双色球| www.276712.com-分分快三是骗局吗| www.36lr.com-全民彩票官网首页| www.341100.cc-福彩牛彩网摘| www.527576.com-彩神8lv-| www.654505.com-七星彩最新规律图规| www.784207.com-乐彩网是正规的吗| www.863532.com-怎么举报彩票网站| www.4973.cn-香港赛马哪里派彩| www.sy7.com-福建快三形态走势图| www.4265.org-篮彩神棍区_虎扑| www.290710.com-福彩3d五行图选号| www.088026.com-共赢福彩-| www.187878.com-七乐彩怎么玩法介绍| www.wp94.com-高频彩票app| www.187080.com-时时彩回血五十万| www.624215.com-福彩3d速查表大图| www.751046.com-彩49网站-| www.808225.com-98c手机彩票| www.878101.com-福彩3d大奖故事| www.163429.com-靠彩票-| www.726295.com-北京福彩兑奖须知| www.800461.com-福利彩票怎样中奖| www.073839.com-旭彩彩票是正规的吗| www.158792.com-下载博友彩app| www.306664.com-彩票站怎么买彩票| www.0473.date-万彩吧彩票c8cn| www.341746.com-福彩截止销售时间| www.95203.com-福彩内部号发说说| www.021627.com-信彩彩票可靠吗| www.128179.com-彩票代理赚流水| www.258597.com-福彩幸运快3官网| www.3859.wang-dd彩票app-| www.cp489.com-贵州快三综合走势图| www.660188.com-彩票大小有规律吗| www.666565.com-万达网彩票-| www.239083.com-彩票大咖微信号| www.322832.com-河北福彩快3开奖| www.393717.com-全国各种彩票开奖|