jquery模拟checkbox(复选框)

前端之家收集整理的这篇文章主要介绍了jquery模拟checkbox(复选框)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

jquery-checkbox

<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>

 

 

.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;}

 

先引入jquery文件

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

 

$(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')
    }
});
 });

 

 

 

猜你在找的jQuery相关文章