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天

知道了
百盈PK10 www.22399.cc-因为彩礼分手的多| www.512813.com-彩票ssc平台网址| www.304062.com-甘肃体彩超级大乐透| www.671096.com-牛彩网排列3| www.al52.com-河南快三投注计划| www.558538.com-彩博士正版四不像肖| www.15803.com-下载中国体彩| www.715500.com-彩票微助手怎么样| www.5348.vip-淘宝有买彩票吗| www.983702.com-体育彩票兑奖在哪里| www.xd70.com-贵州快三一天开几期| www.400312.com-七星彩走势图综合| www.512743.cc-彩吧网app-| www.54xy.cc-牛彩三b字迷| www.007.net-鸣彩艺术传媒| www.497557.com-pk彩线路导航| www.ay6.cc-不要机选彩票| www.99tt.cc-彩票延迟开奖漏洞| www.737108.com-手机报彩票指南| www.554180.com-两字体育彩票术语| www.977390.com-彩色混凝土压模价格| www.vp57.com-甘肃快三跨度图| www.021559.com-快三技巧稳赚方法| www.771504.com-新未来时时彩漏洞| www.717898.com-彩票投注技巧与方法| www.qh37.com-好彩蓝莓双爆价格| www.010451.com-网上彩票手机投注| www.24741.com-彩铅画背影-| www.681458.com-彩票工具今日运势| www.14el.com-手机七星彩直播频道| www.17596.cc-广西福利中奖彩票| www.84xg.com-网络售卖刮刮卡彩票| 开心网www.530995.com| www.02sv.com-世界杯微博竞彩| www.1168.pw-彩票金句-| www.43443.com-5000cc彩票群| www.8966.bid-网上国彩骗局| www.36860.cc-福彩3d豹子号规律| www.468674.com-彩福宝典-| www.6257.top-中彩票的秘诀| www.811781.com-彩票王中王-| www.917765.com-彩虹玫瑰图片| www.979912.com-多赢彩票平台官网| www.cp7198.com-百盈快三稳赚计划| www.75ya.com-胡北体彩11选5| www.286793.com-私彩平台卡时间漏洞| www.120262.com-吉林快三群骗局揭秘| www.796773.com-彩博士官网-| www.42jg.com-彩神可以提现吗| www.729204.com-怎么ps彩票中奖图| www.345942.com-彩票赢家与你同行| www.565095.com-河南彩票app下载| www.691609.com-烟台福彩吴永模现状| www.841368.com-彩妆盘发美甲加盟| www.ou48.com-甘肃快三漏号统计| www.367002.com-彼岸花彩铅画高清| www.776707.com-彩票热号追号| www.wl15.com-彩票走势如何分析| www.104244.com-马来西亚彩票彩种类| www.025167.com-彩票几位数算中奖| www.136227.com-福彩广西基本走势图| www.095167.com-体育足彩直播| www.52768.cc-七彩云南古滇名城| www.594808.com-多乐跑得快三人规则| www.710053.com-彩票app是骗局吗| www.271844.com-博牛彩票登录| www.420840.com-彩票电话投注中心| www.837989.com-彩羽红葡萄酒怎么样| www.1uw.com-深圳神彩uv打印机| www.96793.cc-足彩比分竞彩1| www.ay16.com-福彩快3新规| www.518746.com-高频彩票输得快| www.650893.com-乐和彩竞彩客服电话| www.804516.com-福彩3d彩图总汇| www.944828.com-248彩票全部软件| www.am79.cc-福利彩票快三预测| www.55389.com-时时彩盘子怎么做| www.711252.com-买彩票诈骗案例| www.871328.com-福彩排三三d开奖| www.978919.com-36选7好彩一预测| www.lq10.com-旺彩软件下载| www.cn36.cc-彩神官方网站| www.501466.com-易彩云彩票平台| www.838277.com-81彩票软件-| www.39jd.com-七星彩精准绝杀| www.185665.com-福利彩票发行目的| www.455885.com-乐彩彩票网登录| www.007909.com-星期五开什么奖彩票| www.119803.com-彩经彩票手机下载| www.580434.com-体彩最大弃奖| www.868127.com-特区彩票精彩论坛| www.5547.vip-天空彩票免资料大全| www.21783.cc-彩票大乐透专家预测| www.m16.xyz-体彩排列三四机号| www.69ca.cc-金冠彩票注册| www.591003.com-被彩票害惨-| www.660247.com-移动端彩票-| www.284362.com-赢彩票app下载| www.571816.com-中免绿好彩拉条| www.664506.com-优秀儿童彩铅画图片| www.753724.com-有比k彩好的平台吗| www.830329.com-9万彩票害了多少人| www.895261.com-京东快彩谁赚钱了| www.954230.com-709彩票旧版| www.996097.com-新浪足彩胜负彩| www.at47.com-如何开一家彩票店| www.oy81.com-彩票导师微信号| www.459431.com-竞彩足球串关表说明| www.549713.com-彩票驿站平台app| www.936273.com-福彩网怎么注册| www.982182.com-3d字谜总汇新彩网| www.cai8444.com吉林快三走试图| www.184589.com-湖北快三一定牛遗漏| www.380987.com-什么的彩虹桥| www.6779.in-幸运彩票版图| www.102315.com-加拿大快彩-| www.874415.com-七t星彩开奖结果| 爱上彩票www.ascp1.com| www.897841.com-安徽快三微信群| www.9526.cc-海南私彩倾家荡产| www.34861.com-三d彩报图片| www.935098.com-星空彩票官方ios| www.254045.com-乐盈彩票跑路| www.0436.ren-福彩字谜图迷乐彩网| www.397589.com-彩票几点停止| www.715536.com-天天爱彩票微信提现| www.di76.com-安徽体彩票十一选五| www.071200.com-足彩推单骗局| www.458566.com-体彩海南4加1| www.607914.com-腾讯彩票竞彩足球| www.737192.com-彩吧论坛网站| www.863150.com-分分彩挂机推波方案| www.bf20.com-80彩票正规吗| www.44qu.com-越南好彩香烟价格| www.6556.cc-彩87彩票app| www.536560.com-世界上有多少种彩票| www.5524.gg-福彩3d方案详情| www.730167.com-安徽时时彩快3| www.794786.com-快三和值9多少注| www.859323.com-体彩快乐扑克走势图| www.919611.com-网站彩票制作| www.971309.com-体育彩票广场摸奖| 500万彩票www.96386u.com| 天天彩票www.132880.com| www.sv17.com-高手彩坛网-| www.207696.com-快三软件链接| www.160316.com-好运彩手机版下载| www.299691.com-999彩票应用| www.201354.com-网易彩票下载手机版| www.503135.com-买彩票地址不对| www.734903.com-91彩神计划-| www.865362.com-体育彩票加盟费条件| 博通彩票www.684050.com| www.51oy.com-十字彩软件-| www.4145.cc-彩虹六号笔记本配置| www.53835.com-澳门博彩赌场| www.034605.com-赢彩计划下载安装| www.017945.com-彩票手机万能倍投器| www.95kr.com-世界杯彩票顺口溜| www.56564.cc-ll彩票下载安装| www.916760.com-私彩跑路-| 500彩票www.50080h.com| www.770169.com-彩票项目-| www.897725.com-多彩贵州网湄潭新闻|