jQuery css3分类列表多选框勾选效果



140 559 187



特效描述:分类列表 多选框勾选 勾选效果,类型多选框优化及弹窗 1、复选框优化 2、弹窗效果 3、单选框优化

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

		<div class="code_btn">点我点我</div>
		<div class="set2 clearfloat" id="pop" style="display: none;">
			<ul class="s-pu s-1" id="gg_type1">
				<li class="s-pu_active"><span class="cho-name graycol">定期报告</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check0" value="011001"><label for="check0" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">利润分配</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check5" value="011002"><label for="check5" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">首发上市</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check6" value="011003"><label for="check6" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">增发</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check11" value="011004"><label for="check11" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">配股公告</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check12" value="011005"><label for="check12" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">重大事项</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check13" value="011006"><label for="check13" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">大会决议和公司制度</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check18" value="011007"><label for="check18" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">中介报告</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check25" value="011008"><label for="check25" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name graycol">回访报告</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check26" value="011009"><label for="check26" class="label001 checkMT_o"></label></div>
				</li>
			</ul>
			<ul class="s-pu s-2" id="gg_type2">
				<li><span class="cho-name-t">    季报</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check1" value="01100101"><label for="check1" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name-t">    中报</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check2" value="01100102"><label for="check2" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name-t">    年报</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check3" value="01100103"><label for="check3" class="label001 checkMT_o"></label></div>
				</li>
				<li><span class="cho-name-t graycol">    定期报告补充更正</span>
					<div style="float: right"><input type="checkbox" name="checkbox_1" class="chk_2" id="check4" value="01100104"><label for="check4" class="label001 checkMT_o"></label></div>
				</li>
			</ul>
			<div class="inpuw-cp">
				<input type="button" id="addOne" value=" 添加 " class="inputbtn">
				<input type="button" id="removeOne" value="删除" class="inputbtn-b">
				<input type="button" id="removeAll" value="全部删除" class="inputbtn-b">
			</div>
			<ul class="s-pu s-3" id="gg_type3">
				<li data-value="1-01100301"> 招股意向书</li>
				<li data-value="0-011002">利润分配</li>
				<li data-value="0-011007">大会决议和公司制度</li>
				<li data-value="1-01100706"> 独立董事声明</li>
				<li data-value="0-011001">定期报告</li>
				<li data-value="1-01100104"> 定期报告补充更正</li>
				<li data-value="0-011004">增发</li>
				<li data-value="0-011005">配股公告</li>
				<li data-value="0-011006">重大事项</li>
				<li data-value="0-011003">首发上市</li>
				<li data-value="1-01100303"> 招股说明书</li>
				<li data-value="1-01100304"> 上市公告书</li>
				<li data-value="0-011008">中介报告</li>
				<li data-value="0-011009">回访报告</li>
				<li data-value="1-01100604"> 国有股配售</li>
				<li data-value="1-01100601">股票回购</li>
				<li data-value="1-01100602">吸收合并</li>
			</ul>
			<ul class="tc-btn">
				<li class="set-okbtn" id="ggtype_submit" data-dismiss="modal">确认</li>
				<li class="cancel-btn pop_close" data-dismiss="modal">取消</li>
			</ul>
		</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到