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天

知道了
9彩注册 www.337282.com-今晚七彩码开奖| www.595196.com-快三计划团队稳赚| www.698250.com-温州体彩阳光征召| www.566725.com-快三买单双-| www.828759.com-盗窃彩票中奖射幸| www.944472.com-希望手游彩票内部| 恒大彩票www.299695.com| www.lm62.com-中彩娱乐6-| www.t48.com-网彩最新地址| www.354644.com-怎样查看彩票| www.kj10.cc-新彩票走势网首| www.497887.com-福利彩票中将结里| www.625131.com-福利彩票三d四季号| www.731075.com-网易彩票大快发3| www.fr32.com-怎么学看彩票走势图| www.299368.cc-全能中彩-| www.660831.com-下载福利彩票开奖| www.769921.com-福建好彩头官网| www.891281.com-广西福彩新快3| www.997922.com-乐彩网p3走势图表| www.pd76.com-视频型彩票-| www.1602.wang-广东体育彩票app| www.9790.vip-彩票模拟大师下载| www.158354.com-约彩彩票骗局揭秘| www.499239.com-投彩网网址是多少| www.595332.com-如何看时时彩k线图| www.307667.com-派彩每日推荐大乐透| www.438484.com-yicai易彩-| www.636118.com-彩虹六号墨冰价值| www.cm00.com-7070彩票app| www.6668.xyz-趣9老彩票邀请码| www.278622.com-31彩票官方网站| www.352233.com-完美彩票官网下載| www.426789.com-一分快三有预测吗| www.520726.com-福彩3d九宫寻宝图| www.586335.com-登录福彩诈骗| www.656713.com-双色球基本走势中彩| www.948163.com-千亿彩票手机版下载| www.999227.com-竞彩足球大小球软件| www.44840.com-彩票网站提现不到账| www.xq35.com-体彩浙江11选五| www.479508.com-足彩半场胜负技巧| www.599595.com-彩票咋买才能中奖| www.683212.com-男子一亿买彩票| www.766021.com-国丰彩票app| www.855691.com-福彩最新开始结果| www.926565.com-7彩论文网-| www.985646.com-今日足彩-| www.bd37.com-福利彩票内蒙古快3| www.768208.com-如意彩网-| www.882069.com-彩票工资车贴吧| www.967001.com-网上买彩票被骗了| 彩61www.653436.com| www.368769.com-快三追号是什么意思| www.459087.com-盛世彩票官网地址| www.540079.com-马会彩票免费总站| www.603632.com-pk31彩票-| www.666169.com-航天彩虹吧-| www.732019.com-胜负彩模拟投注| www.796414.com-金尊国际彩票注册| www.863859.com-彩票下载开奖查询| www.921635.com-一个学生破译了彩票| www.973624.com-体彩七彩乐玩法| www.cai6944.com江西快三走势图形态| www.lp73.com-彩中彩一旦-| www.1703.mobi-江苏快三如何稳赚| www.253922.com-福建褔彩票官方网站| www.379588.com-尼彩手机官方| www.1og.com-分分钟时时彩计划| www.214.in-天津时时彩快乐十分| www.04433.com-安徽彩票案-| www.024117.com-重庆时彩对刷| www.301680.com-体彩字迷汇总| www.492406.com-广西体彩站电话| www.596910.com-福彩图库天牛图库| www.740214.com-体彩和福彩哪个靠谱| www.834503.com-高空彩烟价格| www.896350.com-彩票合买网站有| www.956066.com-天天中彩票怎么玩| www.cai5766.com吉林快三跨度走势图| www.92122.com-福彩双色球22选5| www.115556.cc-彩铅怎么调色| www.315070.com-上海体彩在哪里领奖| www.558732.com-圣经中云彩的含义| www.573307.com-彩票均线的制作方法| www.733989.com-杭州竞彩快三开奖| www.009354.com-178彩票没邀请码| www.329652.com-九五贵宾会网站彩票| www.486343.com-巴彦淖尔彩票站申请| www.9qh.com-微博彩票合法吗| www.1171.date-彩票的中奖概率| www.cx69.com-快三中奖-| www.b17.club-北京快三和值表图片| www.64ga.com-为什么玩快三老鼠| www.36582.cc-澳门彩票手机投注网| www.92932.com-神兽竞彩团队青龙| 彩票A8www.fz34.com| www.uq94.com-苹果手机怎么买福彩| www.32gh.com-环球彩票平台下载| www.98au.com-黑彩网站怎么破解| www.8735.xyz-威信彩票官网| www.187880.com-热门彩种-| www.41486.com-玩彩票这个软件| www.031312.com-黑彩平台代理好吗| www.123423.com-体彩7位-| www.203915.com-中国福利彩票5d奖| www.260717.com-福利彩票比较器| www.324658.com-中央查过彩票吗| www.mc19.cc-上彩票app-| www.1cb.cc-天福彩票注册地址| www.47ti.com-视频彩铃下载| www.654.biz-圣地彩杀一码| www.8805.cc-万彩吧开奖查询| www.796514.com-体彩店能买双色球吗| www.866788.com-今晚福彩3d-| www.cp6.cm-福利彩票5d-| www.4717.biz-卖福利彩票怎么开店| www.246558.com-高频彩票改革| www.590271.com-福彩3d跨度尾走势| www.683909.com-中国官方彩-| www.778286.com-彩乐网彩票-| www.891641.com-彩票统计表怎么做| www.972208.com-山东福彩双色球| www.bq90.com-至尊彩快3软件下载| www.9067.com-今天七色彩开奖结果| www.4638.xyz-现在人都买什么彩票| www.912787.com-好彩客为什么没人抓| www.975549.com-内蒙古的快三| 13e彩票www.807860.com| www.023723.com-七星彩彩迷天地| www.222363.com-国家正规彩票软件| www.653156.com-澳彩网app-| www.872291.com-中彩网网址xycc| www.954938.com-福彩奖池-| 500万彩票www.96386n.com| www.287398.com-yy彩票_登录| www.39953.cc-博牛彩票是骗人吗| www.062151.com-大发彩票是真的吗| www.tx34.com-竞彩足球8串1规则| www.625103.com-会员登录一98彩票| www.79sf.com-福彩三个号-| www.1912.org-东方彩票一投入梦想| www.0667.cm-快三怎样能稳赚视频| www.36bh.com-七星彩2000期| www.9097.cc-重庆老时彩开奖号码| www.cd01.com-体彩三-| www.sq92.com-本期的彩票指南报纸| www.yv54.com-云南省福彩中心| www.29qi.com-水彩画日出-| www.307599.com-派彩电视怎么下载| www.886309.com-江苏乐彩站-| www.219216.com-体彩36选7-| www.305681.com-彩票靠运气吗| www.04237.com-足彩概率漏洞| www.9572.online325彩票-| www.hf03.com-广西快三选号助手| www.50uq.com-手机淘宝彩票不能买| www.960223.com-高德彩票是正规的吗| 500彩票www.359215.com| www.678631.com-彩客足球触屏版| www.875078.com-极速时时采彩| www.sq73.com-九龙彩霸王-| www.669861.com-福彩是七位数吗| www.127988.com-彩虹儿歌歌词|