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.664110.com-中国福彩电脑版首页| www.83378.com-初级彩票师-| www.122299.com-彩票倍投1000倍| www.178466.com-中国体育彩票| www.273691.com-彩票pc是什么意思| www.uw25.com-体彩481中奖技巧| www.690376.com-足彩波胆技巧| www.875049.cc-全民竞彩官网| www.967309.com-福彩双色球预则最准| www.cai0799.com幸运快三官网| www.03aq.com-彩票弃奖规则| www.216040.com-福利彩票规则玩法| www.334767.com-网上彩票钱取不出来| www.455962.com-买彩票亏钱了怎么办| www.193234.com-派彩网付费板| www.969928.com-中国福利彩票真实| www.869352.com-七星彩兑奖图| www.949881.com-百宝彩票快三| www.cai3599.com内蒙古快三专家预测| www.pj12.cc-119彩票-| www.692607.com-9999彩票app| www.797188.com-天津时时彩在线直播| www.874639.com-体彩11选五湖北| www.964416.com-爱乐透彩票专业版| www.cp362.com-体彩5d开奖号码| www.131045.com-河南林州彩礼钱多少| www.14un.com-玩时时彩靠谱吗| www.79fn.com-彩票性缘35-| www.185380.com-广西福彩快3遗漏值| www.288853.com-体彩基础知识| www.444407.com-cp趣彩-| www.356946.com-朋友送的彩票中奖了| www.512573.com-动物简笔彩铅画| www.657340.com-中国竞彩网冠亚军| www.804736.com-怎样选彩票-| www.62636.cc-篮球彩票竞猜| www.178124.com-快三概率表-| www.386649.com-韩国彩票快乐彩官网| www.659058.com-财神会彩票-| www.869825.com-怎么看彩票开奖视频| www.qx71.com-最好的时时彩软件| www.07093.com-福利彩票应用软件| www.930360.com-彩虹刷业务平台| www.bz41.com-买彩票怎么选号中奖| www.7110.vip-彩盈娱乐手机版| www.23054.com-马上彩票-| www.68623.com-天天好彩-| www.032926.com-七星彩梦书查码| www.101739.com-投彩是什么东西| www.293832.com-马耳他彩票官网| www.6958.in-重庆7时彩是真的吗| www.35682.cc-彩票之家999| www.901246.com-彩票教学视频| www.sg44.com-五省快三走势图跨度| www.59xa.com-香港十分彩-| www.26gy.com-体育彩票大乐透图片| www.568036.com-福彩10选8怎么玩| www.654699.com-七星彩是什么软件| www.737276.com-众彩网子墨预测| www.815551.com-排五是福彩还是体彩| www.916998.com-彩客网首页擂台| 凤凰彩票www.3479r.com| www.1353.cm-苹果彩票怎么玩| www.33848.com-广西快三大小怎么算| www.009913.cc-华彩论坛-| www.501452.com-彩票包网开版| www.703752.com-111彩票app-| www.893739.com-千亿彩票app| www.sh25.com-彩票福彩3d-| www.258441.com-足彩推荐-| www.04474.com-彩票app微信提现| www.229776.com-彩票端app-| www.16055.cc-天天彩选3开奖号码| www.536198.com-福彩40万刮刮乐猪| www.0630.org-彩票讲堂女主持人| www.98937.cc-时时彩三星跨度打法| www.232323.cc-黑彩票怎么赚钱| www.696177.com-足球混合竞彩| www.xd47.com-在线买彩票app| www.581.space-时时彩公式0369| www.25332.com-福彩3d彩搜网| www.119782.com-广西快三直播| www.359513.com-彩票老司机软件| www.575524.com-今晚3d旺彩推荐号| www.213950.com-贵州快三走势图号码| www.570660.com-快三开奖走势图今天| www.69957.com-88时时彩-| www.yf42.com-好彩彩票-| www.972755.com-小学彩铅画-| www.7202.vip-a彩娱乐合法吗| www.516077.com-彩票1288-| www.df62.com-旭彩网靠谱吗| www.b33.online-49c彩票会员登录| www.883886.com-黑彩代购-| www.144582.com-中超足彩竞猜分析| www.267341.com-职业彩票高手经验| www.377358.cc-正规qq彩票-| www.515053.com-七星彩下载安装| www.585866.cc-福彩没人买了| www.y22.top-奥客彩票排列五开奖| www.75ov.com-10选一彩票开奖| www.2634.xyz-时时彩漏洞改单| www.749307.com-彩神v11靠谱吗| www.851109.com-福彩快三讲座视频| www.913381.com-官方彩票预测网站| www.966691.com-一分彩在哪里下载| 500彩票网www.97655t.com| www.719028.com-比喻彩虹像什么| www.789785.com-香蕉计划竞彩理财| www.858453.com-快三计划免费版| www.909862.com-彩票双色球出号公式| www.993031.com-福彩快三中两个号| www.111000.com-欧洲彩票巨奖骗局| www.w37.club-盈易福彩下载安装| www.144707.com-福彩3d狐不归预测| www.4764.cn-玩黑彩钱提现不出来| www.211218.com-福利彩票快3好中吗| www.353118.com-热购彩票代理| www.726797.com-1516.彩票官网| www.123115.com-酷彩是个坑-| www.49055.com-神圣彩票网址| www.625250.com-大发云彩票投诉| www.51473.com-福彩3d定胆-| www.671432.com-乐赢彩下载-| www.699581.com-快三必中两码组合| www.6096.shop-釉上彩作品-| www.532650.com-福利彩票上海销售点| www.610539.com-彩票软件网站好不好| www.652244.com-天天赢彩票是坑| www.8479.cm-澳门博彩报警有用吗| www.066277.com-900彩票官网| www.458452.com-彩票几点开奖大乐透| www.702219.com-足彩胜平负比分| www.311830.com-一分快三稳定平台| www.506861.com-亿彩网漏洞-| www.cp977.com-江苏快三助手安卓版| www.337546.com-彩吧今天试机号| www.282296.com-中国体育彩票有几种| www.615276.com-福彩三d位积和走势| www.626965.com-双彩网张维新| www.11369.cc-天天竞彩客户端| www.183217.com-上海彩票快三| www.895021.com-彩票理财方式| www.614234.com-最新大马彩-| www.702759.com-网络竞彩骗局| www.797954.com-体彩11选择5秘密| www.873447.com-体育彩票怎么停售了| www.xw05.com-体育彩票可以折叠吗| www.up12.com-7193鸿彩-| www.3dv.cc-手机黑彩下载| www.93ja.com-彩票站售票员少钱| www.438353.com-附近体彩站离多远| www.77751.cc-体彩销售故障垃圾| www.117447.com-澳门足彩即时盘口| www.s77.top-福彩3d今晚开奖吗| www.93ck.com-买东西送彩票的文案| www.3772.xyz-南国彩票排列五| www.9454.org-体彩半全场什么意思| www.617683.com-男方给的彩礼钱归谁| www.494.cc-江苏体彩位数| www.70850.com-天天彩票送彩金| www.l37.org-下载福彩app| www.305336.com-网上买彩票流程| www.672720.com-福彩3d走势彩宝网|