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.308208.com-在彩票777被骗了| www.33802.com-篮球彩票分析师| www.91255.com-3d彩票图谜画谜| www.060064.com-澳门彩金是真的吗| www.138274.com-三d彩票走势图大全| www.751564.com-在线彩票购买| www.851216.com-如何去店里买彩票| www.918613.cc-正规的彩票软件苹果| www.979540.com-晚晚彩票-| www.yk8.com-快乐彩票官网| www.021110.com-新宝彩票登录| www.u54.com-k8彩开奖网-| www.22mz.com-吉祥彩票骗局| www.3826.com-七星彩从几个数里选| www.228202.com-福彩快三计划手机| www.915949.com-福彩出兑-| www.985325.com-重庆彩全天计划| www.222036.com-彩票大小开挂软件| www.272014.com-江苏快三人工计划| www.751284.com-彩票之家原正版资料| www.838722.com-丹麦28彩官网| www.912086.com-福彩53-| www.975969.com-周口的彩礼和陪嫁| www.033517.com-彩川ひなの番号| www.cp5728.com-安徽福彩兑奖地址| www.tc21.com-凤凰彩票战狼计划| www.316812.com-体育彩票图标| www.391328.com-五星娱乐彩票平台| www.756454.com-全民彩彩票旧版| www.20148.com-永兴娱乐彩票| www.528833.com-歌词里最美的彩虹| www.32598.com-薇薇彩票-| www.82583.com-足彩19040结果| www.ss17.com-中国彩票-| www.83996.cc-彩票种大奖到那领取| www.842226.com-那个彩票软件能杀号| www.au84.com-快三投注平台有哪些| www.g24.com-福彩3d彩易网| www.185442.com-快三投注第一门户网| www.301100.com-免费送38彩金| www.561716.com-双赢彩票官方网站| www.644120.com-吉利快三下载安装| www.726523.com-美术彩铅画作品图片| www.799963.com-福彩开奖双色球查询| www.80yo.com-彩神通会员四码| www.1100.com-上海福彩客户端| www.209.biz-水溶彩铅的画| www.3600.in-爱乐彩票抢红包| www.388212.com-67彩票网站-| www.510655.com-天津彩站宝-| www.584569.com-真钱捕鱼送20彩金| www.660358.com-众彩网彩票专家预测| www.739765.com-福彩888-| www.2368.pw-快三开奖走势图今天| www.68358.cc-彩开头的四字成语| www.580.tv-时时彩万位是第几球| www.717945.com-彩票平台对刷| www.807749.com-快三怎么守号中大奖| www.884189.com-杏彩网页在线登录| www.969046.com-众彩彩票是真是假| 大赢家彩票网www.544010.com| www.920669.com-彩神争8手机| www.1398.org-儿童简单水彩画图片| www.185863.com-大发时时彩怎么玩| www.299934.com-看彩票走势图技巧| www.md74.com-体彩独胆预测专家| www.220296.com-福彩3d预测分析飞| www.637806.com-上海市体彩中心官网| www.970901.com-迷彩免下载-| www.667663.com-吉祥颜彩和凤凰颜彩| www.920565.com-u588彩票网-| 爱购彩票www.463552.com| www.045813.com-彩81彩票官方网站| www.11766.cc-彩票体彩十一选5| www.383593.com-福利彩票电视台直播| www.532697.com-星彩叫夏侯姬妈| www.628952.com-111600开彩-| www.781034.com-湖北精彩十分70期| www.925574.com-女的玩快三-| www.990496.com-福彩字谜汇总图| www.21.link-境外网络黑彩| www.94432.com-pc快彩-| www.798856.com-福彩102多少钱| www.729419.com-博彩88-| www.39995.com-3号彩票入口| www.88284.com-手机彩票红包聊天室| www.77226.cc-机选彩票中了一等奖| www.998336.cc-福彩票3d开奖号码| www.7sk.com-排列三彩民毒胆王| www.0769.wang-分分彩到底能不能玩| www.170453.com-江西多乐彩-| www.699506.com-福彩3d直选组合| www.564574.com-越南5分彩计划| www.32271.com-百福彩是骗人的吗| www.006616.com-体育彩票任三| www.777475.com-锋彩app直播下载| www.9390.biz-彩票三地二十四期| www.768326.com-爱乐彩河北十一选五| www.ci37.com-吉林快三我输80万| www.51267.cc-15分钟开奖的彩票| www.662.in-彩3d开奖结果| www.33294.com-高频彩票调整解读| www.823820.com-竞彩足彩漏洞| 大赢家彩票平台www.631027.com| www.3739.me-海南省体彩中心电话| www.142811.com-彩虹8网络彩票| www.812733.com-福彩3d中奖秘籍| www.716976.com-荷花彩铅-| www.812134.com-亮彩足球计算器| www.019937.com-洛阳体育彩票店转让| www.066106.com-彩虹宝宝音频| www.74te.com-彩云追星战法| www.693077.com-微彩是合法的吗| www.803756.com-彩500uu直播| www.55rg.com-福彩三d静候佳音| www.16nk.com-昨晚体育彩票中奖号| www.849546.com-体彩第19038期| www.938607.com-双赢彩票手机版| www.994881.com-好彩网是干什么的| www.ny6.com-下载快三开奖结果| www.657619.com-排三彩宝贝-| www.748131.cc-福彩3d绘图-| www.833055.com-彩77官方登陆| www.910321.com-百度乐和彩网| www.982866.com-永信彩票-| www.xs4.cc-福彩10选5官网| www.96293.com-彩票年底会停手吗| www.05er.com-彩铅画和线描区别| www.220133.com-快三开挂器-| www.228208.com-喜乐彩第二位走势图| www.636748.com-彩虹画儿童画用彩笔| www.790408.com-姓名选号彩票大乐透| www.885795.com-彩神5号彩-| www.cai5900.com江苏福彩快三走势图| www.qv75.com-地区快三是真的吗| www.49.hk-打错彩票中奖怎么办| www.97880.com-时时时彩宝典| www.022700.com-1516专注彩票网| www.478198.com-综艺福彩平台| www.lk00.com-豪彩官网下载安装| www.928109.com-彩色复印机复印钞票| 500彩票网www.611036.com| www.jy24.com-天天彩票-| www.5660.biz-c29彩票下载安装| www.28793.cc-彩快彩王网址| www.061601.com-好彩客老版下载| www.77382.cc-好彩客安卓下载| www.999119.cc-彩乐汇可以退出吗| www.544757.com-3d彩易-| www.643337.com-幸福彩票官网下载| www.720338.com-七星彩高频技巧| www.0946.vip-求一个合买彩票网站| www.318659.com-01彩票正规吗| www.40539.com-360彩票能买了| www.410655.com-哪里买足彩靠谱| www.227899.com-今晚福彩开奖结果| www.314426.com-飞鱼彩票玩法| www.365241.com-快三什么时候加奖| www.424977.com-青岛七彩筒灯| www.506066.com-湖北快三加奖公告| www.556076.com-体彩刮刮乐免费试刮| www.606508.com-竞猜足彩停售时间| www.657609.com-一元分分彩-| www.704277.com-万家彩手机app|