jquery模拟checkbox(复选框)

2014-07-29阅读(16751)评论(5)牵着狗狗看MM

苏州实时公交查询

我们知道各个浏览器的复选框(checkbox)的样式不统一,IE下的更是很丑,下面我们来模拟复选框(checkbox)
思路:把默认的checkbox表单隐藏起来,旁边增加一个标签替代,对标签进行点击操作的同时,改变checkbox的选中状态。
效果图:
jquery-checkbox

HTML CODE

[html]
<div class="checkbox-con">
<span>
<input type="checkbox" class="ipt-hide">
<label class="checkbox"></label>选项一
</span>
<span>
<input type="checkbox" class="ipt-hide">
<label class="checkbox"></label>选项二
</span>
</div>
[/html]

CSS CODE

[css].checkbox{width: 15px;height: 15px;display: block;float: none;border:1px solid #DBDBDB;background: #F5F7F9;cursor: pointer;position: absolute;top: 0;left: 0;}
.checkbox-con .cur{border:none;width: 17px;height: 17px;background:url(https://www.w3cways.com/wp-content/uploads/2014/07/1.png) no-repeat;}
.checkbox-con span{display: inline-block;position: relative;padding-left: 20px;margin-right: 10px;}
.checkbox-con .ipt-hide{position: absolute;width: 0;height: 0;border: none;}
[/css]

jQuery CODE

先引入jquery文件

[html]<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
[/html]
接着写JS
[js]$(function () {
$(‘.checkbox’).on(‘click’,function(){
if($(this).siblings("input[type=’checkbox’]").attr(‘checked’)){
$(this).removeClass(‘cur’);
$(this).siblings("input[type=’checkbox’]").removeAttr(‘checked’)
}
else{
$(this).addClass(‘cur’);
$(this).siblings("input[type=’checkbox’]").attr(‘checked’,’checked’)
}
});
});
[/js]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jquery模拟checkbox(复选框)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏