首页 > 代码库 > 复选框样式自定义
复选框样式自定义
一、HTML部分
<label class="check_list i_check"> <input name="checkbox" type="checkbox" class="checkbox"> </label>
二、CSS部分
.check_list{ float: left; } .checkbox{ opacity: 0; filter:alpha(opacity=0); cursor: pointer; } .i_check{ background: url(imgs/复选框1.png) no-repeat; } .i_check:hover{ background: url(imgs/复选框hover.png) no-repeat; } .i_checked{ background: url(imgs/复选框-选中.png) no-repeat; }
三、jq部分
$(".checkbox").click(function (){ //判断复选框勾选状态 if ($(this).is(‘:checked‘)) { $(this).parent().removeClass("i_check").addClass("i_checked"); //删除未勾选选背景 }else{ $(this).parent().removeClass("i_checked").addClass("i_check"); } });
复选框样式自定义
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。