SCheckbox_jquery模拟checkbox(复选框)

该博客介绍了一种解决浏览器间复选框样式不一致问题的方法,通过隐藏默认的checkbox,用CSS和JavaScript创建自定义样式。点击标签可以改变checkbox的选中状态,实现了视觉效果的一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们知道各个浏览器的复选框(checkbox)的样式不统一,IE下的更是很丑,下面我们来模拟复选框(checkbox)

思路:把默认的checkbox表单隐藏起来,旁边增加一个标签替代,对标签进行点击操作的同时,改变checkbox的选中状态。

效果图:

HTML CODE

[html]

选项一

选项二

[/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]

[/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]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值