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.876854.com-6228彩票-| www.125330.com-福彩刮刮卡规则| www.932469.com-大发快三稳定计划| 大赢家彩票平台www.675120.com| www.pm10.com-彩圣福彩3d字谜| www.563772.com-每年今天福彩出奖号| www.660918.com-彩票代理发展渠道| www.16809.com-专业购彩大发彩票| www.74666.cc-十分彩是正规| www.797782.com-九九集团彩票可信吗| www.965852.com-中国福彩中心试机号| 99彩票www.543977.com| www.365655.com-彩铅绘画技法培训| www.474798.com-百盛娱乐彩票有托吗| www.558788.com-竞彩大奖历史记录| www.7864.xyz-时彩彩怎么才嬴| www.843515.com-福彩会不会改制| www.yu07.com-天福彩20选8| www.305899.com-买彩票是怎么说| www.395213.com-今天体彩有何奖项| www.507122.com-怎样分析彩票走势| www.599372.com-网上哪有买彩票的| www.368870.com-河北省彩票管理中心| www.z65.shop-高频率彩票-| www.067567.com-中彩网北斗3d推荐| www.139942.com-彩16安卓版-| www.869200.com-巨丰彩票心水资料| www.43087.com-福彩个位跨度怎么算| www.062505.com-彩神不让提现| www.5273.org-体育彩票销售到几点| www.24xa.com-华彩集团有限公司| www.443898.com-体育彩票直播频道| www.110637.com-有5分钟开的彩票吗| www.79jj.com-时时彩推波方案| www.269018.com-超彩票-| www.922702.com-体彩店开业宣传单| www.99271.com-福彩快三规律讲解| www.153065.com-彩票扫描查中奖| www.501909.com-彩票数字之间的关系| www.582578.com-时时彩胆码运用技巧| www.092885.com-美国快三中奖规律| www.263131.com-中彩网七乐彩走势图| www.507.me-探探的套路买彩票| www.842006.com-国足体彩-| www.979698.com-安卓彩票软件哪个好| www.cx77.com-湖北快三下载| www.896737.com-中国福彩购彩大厅| www.967437.com-易彩票官方网站| 旺旺彩票www.404499.com| www.873413.com-彩票有限额吗| www.605233.com-彩色苹果笔记本| www.713338.com-福利彩票中两个数字| www.55731.cc-永利网站彩票可靠不| www.025046.com-联运彩票pp-| www.32xi.com-彩票快彩脚本| www.63jz.com-湖南福彩兑奖政策| www.2749.cc-汉中体育彩票中心| www.88wk.com-500彩票网邀请码| www.65523.cc-炫彩成语-| www.776698.com-彩票追号是什么意思| www.968935.com-澳门的软彩金手镯| www.621608.com-彩票巴巴安卓版下载| www.px53.com-提现快的彩票app| www.273283.com-福彩有什么彩种| www.4828.cm-c16彩票平台网址| www.871284.com-时时彩专家计划| www.85ic.com-想玩时时彩的找我| www.5426.com-福彩3d正版图迷| www.13262.cc-雪缘园足彩误差| www.56262.cc-广东彩票有哪些种类| www.777609.com-彩票中奖票样展示图| www.698505.com-分分时时彩在线预测| www.205449.com-喜乐彩走势图两元网| www.790505.com-彩票幸运选号大转盘| www.205228.com-北京快三走试图| www.545922.com-菏泽福利彩票店转让| www.636364.com-彩虹画室-| www.735544.com-吉祥彩0500cm| www.35492.com-模拟彩票投注软件| www.eu1.com-快三秒热水器价格| www.u14.com-深圳福彩投诉| www.9391.cn-独中彩票101亿| www.499873.com-大众彩票网开奖直播| www.88521.com-2m彩票永久免| www.073337.com-众赢彩票下载安装| www.ol58.com-福彩有几个玩法| www.04by.com-德惠黑彩-| www.55557.cc-彩虹伞打地鼠玩法| www.809755.com-手机上买彩票违法吗| www.961179.com-内蒙古快三定牛| www.04538.com-微信足彩在哪里买| www.179487.com-湖北快三爱彩乐| www.710904.com-足彩任选九场| www.828232.com-吉彩宝官方下载苹果| www.982856.com-彩票分享-| www.02122.cc-一分彩害死多少人| 国彩彩票www.657666.com| www.441605.com-中国体彩限制| www.664560.com-七乐彩工具大全| www.132619.com-彩票截止购买时间| www.331718.com-乐彩网江苏快三| www.32aq.com-国际财富彩票| www.3667.wang-足彩滚球是什么意思| www.22118.cc-足彩分析师app| www.299875.com-91彩神做代理| www.15799.cc-华夏彩票分分快三| www.500008.com-时时彩微信赌博群| www.285608.com-重庆时时彩玩法| www.375198.com-福彩网私彩-| www.535952.com-彩票选几个数字| www.032629.com-137彩票-| www.554815.com-彩票偏态分布| www.08bh.com-①13彩-| www.244323.com-大连体彩-| www.076193.com-荐彩-| www.0392.cc-7彩票网站-| www.m87.cc-网上玩彩票的骗人吗| www.546539.com-香港赛马派彩及结果| www.737668.com-辽宁福彩3d和值| www.7607.vip-新浪爱彩是什么情况| www.nj2.com-青海快三和值表| www.011069.com-极速时时采彩网站| www.062594.com-中博快三计划软件| www.223754.com-中国体彩网官方网站| www.005432.com-高频彩拉人-| www.25627.cc-哪个彩票可以容错| www.1936.vip-河南省豫彩通| www.621565.com-快乐彩是什么| www.716281.com-彩铅入门画人物| www.789650.com-成都彩钢围挡| www.893860.com-彩61官网下载| www.974208.com-全民彩票28-| 500彩票www.523121.com| www.mb41.com-腾讯分分彩挂机稳赢| www.4za.cc-彩乃奈奈楼梯照片| www.505.cn-大发分分彩开奖记录| www.41794.com-彩神计划是真的吗| www.21gm.com-688.cc彩票-| www.953.date-福彩3d选胆图| www.55db.com-福利彩票14人贪污| www.539009.com-欢乐时时彩开奖| www.637902.com-七星彩排列五表| www.692319.com-私彩开奖时间差| www.298876.com-贵州福彩快三走势| www.68tk.com-万达彩票计划| www.7079.vip-彩友汇是正规平台吗| www.17yh.cc-青海快三走试图| www.78112.cc-九州彩票平台正规吗| www.9707.loan-三分pk彩票-| www.926297.com-江西上饶体彩销售点| www.73715.com-香港二分彩-| www.811272.com-山西福彩3d走势图| www.256244.com-彩之乐app-| www.392405.com-迪丽热巴彩铅画教程| www.313788.com-彩票中奖新闻最近| www.ew34.com-牛彩票网-| www.280998.com-江西时时彩下载| www.9190.in-新加坡4d彩票规则| www.7283.cn-关于彩虹的童谣| www.199583.com-体育彩票排列三骗局| www.28315.cc-江苏福彩中奖规则| www.69632.com-金彩彩票合法吗| www.45ff.com-快三新周易魔图公式| www.669995.com-彩色通道-|