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.254504.com-爱乐彩票正规吗| www.807512.com-快三守号怎么赚钱| www.885079.com-广西快三组合走势| www.836132.com-彩22平台是真的吗| www.5999.date-山东省体彩中心新址| www.79139.com-微信群里玩彩票| www.11074.com-安卓足彩软件| www.69559.cc-下载彩票98彩| www.948343.com-排五走势图彩吧助手| 500彩票www.786819.com| www.384719.com-彩票考试-| www.888923.com-神彩争霸8最新下载| www.cp5466.com-北京快3走势图彩票| www.f60.xyz-香港球彩台有软件| www.0431.wang-做彩票的方法| www.893.cx-彩库宝典旧版下载| www.229685.com-体彩下载-| www.455530.com-河南福利彩-| www.637507.com-福彩公益金济宁| www.655093.com-福星体彩七星彩| www.107022.com-这么中彩票-| www.30ht.com-咋天体彩中奖号| www.303393.cc-7彩彩票-| www.888491.com-下载第一彩票| www.970933.com-福利彩票都有哪几种| www.af4.com-河北体彩开奖| www.nc55.com-网易快三app| www.518544.com-乐彩518直播厅| www.565.red-极速赛车是什么彩| 博友彩www.939253.com| www.002319.com-香港行政快三3| www.36323.com-时时乐走势图彩经网| www.680961.com-购彩2app-| www.761546.com-快三人工计划群| www.833826.com-体彩开机直播| www.899266.com-彩票中奖恶搞神器| www.962847.com-七乐彩齐鲁风采| 金冠彩票www.49956z.com| www.ht18.com-有香港快三彩票吗| www.66910.com-重庆彩票领奖地址| www.065684.com-必赢彩票贴吧| www.vo35.com-快三遗漏查询| www.9792.biz-我查一下彩票| www.81275.com-排五走势图乐彩网| www.3662.cc-933彩票骗人| www.39526.cc-北京体彩网app| www.0759.bid-金沙国际时时彩| www.ch96.com-炫乐彩票官网| www.828128.com-春天彩票网站| www.948646.com-你们买彩票中过奖吗| www.cp538.com-快3彩票app-| www.922887.com-河南彩色沥青颜料| www.395683.com-奇门遁甲测香港港彩| www.662972.com-当今最新彩票走势图| www.255727.com-中福快三-| www.385310.com-彩票百富网-| www.149958.com-福彩快三彩票安微| www.38172.com-成功彩票官网| www.520379.com-福彩双色球单价| www.y92.cn-彩漫福利本子动态| www.821786.com-蓝球杀号彩乐乐| www.928970.com-全民玩彩福彩排列| www.23cp.com-体彩任九开奖时间| www.213839.com-彩神ii移动彩票| www.616377.com-百万彩票注册| www.75gi.com-体彩大乐透官方电话| www.286024.com-福彩三d解太湖汇总| www.372715.com-福彩合尾走势图| www.7116.net-利博彩票骗局| www.54087.cc-博彩推广-| www.573872.com-808彩吧坑人吗| www.380414.com-西安快三走势图| www.156474.com-五百万彩票网站| www.610131.com-彩票777官网| www.683598.com-义乌体彩兑奖中心| www.766186.com-甘肃酒泉福彩快三| www.840360.com-2018福彩销售额| www.910163.com-汤姆克兰西彩虹六号| www.974106.com-彩民在线-| www.ia6.cc-福建福彩快三遗漏及| www.720429.com-七星彩怎样看规律| www.484354.com-多彩网信得过吗| www.0573.net-体彩第19026期| www.02155.com-彩票每日首存送彩金| www.9806.online彩票专家网345| www.194625.com-时时乐开门彩| www.381253.com-七乐彩31日号码| www.235285.com-微信上的广东福彩| www.466.la-有钱人买彩票发财| www.30gi.com-福彩3d奖结果r祸| www.819301.com-我要中彩票救命| www.980896.com-开个彩票店赚钱吗| www.w84.cn-体育彩票每周几开奖| www.765475.com-今晚七星彩神算子| www.8509.vip-彩贝游戏大厅| www.193022.com-江西福彩网-| www.365629.cc-众盈国际时时彩| www.412515.com-成都彩钢夹芯板| www.173725.com-彩神app大发快3| www.358499.com-凤凰彩登录首页| www.506116.com-博彩交流网-| www.628400.com-557彩票邀请码| www.727738.com-福彩中奖查询app| www.923708.com-好彩1预测分析| www.nq68.com-甘肃体彩助手下载| www.pw35.com-彩票里面的砍龙| www.803677.com-海南七星彩头尾预测| www.47599.com-好彩妹电视剧名字| www.470228.com-快发彩票线路检测| www.98fg.com-传统竞彩足球| www.07008.com-730彩票登录| www.41011.com-网上买彩票安全吗| www.98470.com-时时彩软件怎么做| www.970094.com-今天的七彩奖是什么| www.52oe.com-南京结婚彩礼| www.27762.cc-黑龙江畅快三| www.220046.com-北京快三投注大或小| www.16899.cc-彩神争争霸ll| www.659410.com-彩票p62-| www.138588.com-时时彩开奖视频直播| www.267365.com-快三的专家推荐号码| www.080215.com-哪个国家开奖南洋彩| www.233167.com-彩乐汇是正规的吗| www.771797.com-关于腾龙时时彩做号| www.447155.com-福彩3正版藏机图| www.062981.com-网上彩票加盟| www.188364.com-福利彩票三选三怎么| www.338407.com-支付宝搜彩票| www.654924.com-58彩票苹果-| www.740123.com-金龙彩票安卓版| www.822343.com-七星彩18148期| www.880732.com-手机淘宝网买彩票| www.947786.com-福彩什么时候开奖| www.989456.com-中彩网手机-| www.as5.com-大发快三倍投必死| www.qz28.com-足彩玩法8×28| www.4bb.cc-移动动梦网炫彩版| www.620388.com-一定牛快三北京| www.133663.com-福彩3d彩图第一版| www.456.biz-富人买彩票-| www.356329.com-彩票的原理的规律| www.263830.com-菲律宾5分彩走势图| www.473039.com-福彩3d和值振幅| www.571152.com-湖北快三过滤工具| www.660314.com-大数据分析预测彩票| www.003714.com-八号彩票合法吗| www.615900.com-彩609彩票-| www.563750.com-彩票聂军礼-| www.746705.com-河北福彩中心地址| www.dm01.com-五分快三下载应用宝| www.21jg.com-福彩app刷彩单| www.0845.org-足彩让我倾家荡产| www.99me.com-吉林快三封盘时间| www.679350.com-彩经彩票网可靠| www.183816.com-福彩快3奖励规则| www.35717.cc-开体彩店需要多少钱| www.011986.com-快三作弊软件| www.381383.com-彩票71期-| www.912735.com-好彩客正规吗| www.301140.com-彩鸿彩票不能提现| www.055228.com-带彩票的成语| www.360890.com-富贵彩害死了多少人| www.509193.com-大只500彩票分析| www.862514.com-今体彩开奖结果|