jQuery移动端单选按钮美化特效代码下载


jQuery移动端单选按钮美化特效代码下载
jQuery移动端单选按钮美化特效代码下载以及移动端、单选按钮美化等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/lc_switch.min.js"></script>

3. HTML代码

<div class="inner-input">
	<label class="fixed-w" style="width: 8em;">10.销售部</label>
	<div class="to_chose">
		<input type="checkbox" class="lcs_check" name="dept" value="10" autocomplete="off" />
	</div>
</div>
<div class="inner-input">
	<label class="fixed-w" style="width: 8em;">20.市场部</label>
	<div class="to_chose">
		<input type="checkbox" class="lcs_check" name="dept" value="20" autocomplete="off" />
	</div>
</div>
<div class="inner-input">
	<label class="fixed-w" style="width: 8em;">30.财务部</label>
	<div class="to_chose">
		<input type="checkbox" class="lcs_check" name="dept" value="30" checked autocomplete="off" />
	</div>
</div>
<div class="inner-input">
	<label class="fixed-w" style="width: 8em;">40.设计部</label>
	<div class="to_chose">
		<input type="checkbox" class="lcs_check" name="dept" value="40" autocomplete="off" />
	</div>
</div>
<div class="inner-input">
	<label class="fixed-w" style="width: 8em;">50.研发部</label>
	<div class="to_chose">
		<input type="checkbox" class="lcs_check" name="dept" value="50" checked autocomplete="off" />
	</div>
</div>
<div class="inner-input btn-groups">
	<button type="button" onClick="checkfun(40, 1)" class="do">选中设计部</button>
	<button type="button" onClick="checkfun(30, 0)" class="do">取消财务部</button>
	<button type="button" onClick="resetfun()" class="reset" >重置</button>
</div>
<div class="btn">
	<button type="button" class="save">保存信息</button>
</div>
<!-- 依赖jquery -->
<!-- core library -->
<script type="text/javascript">
	$('.lcs_check').lc_switch();
</script>
<script type="text/javascript">
	var checkfun = function (val, checked) {
		var checkNode = $("[name=dept][value="+val+"]")
		checked ? checkNode.lcs_on() : checkNode.lcs_off();
	}
	var resetfun = function () {
		window.location.reload();
	}
	$('.save').click(function(){
		// 获取选中的值
		var checkids = [];
		$('[name=dept]:checked').each(function(item){
			checkids.push( $(this).val() )
		})
		alert( "选中的部门:" + checkids.join(',') )
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章