制作一个自定义的checkbox

最新推荐文章于 2024-08-08 19:00:48 发布

励志成为一个弓箭手的程序猿

最新推荐文章于 2024-08-08 19:00:48 发布

阅读量1.3k

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/sinat_21125451/article/details/50474819

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一直都不知道checkbox，radio，上传文件标签的样式怎么去改。

和平常一样，页面的问题还是要去改！不多说了，心累啊！现在就说一下我是怎么解决这个问题的。

1.这个是一开始的页面（注意记住密码前面的checkbox）：

2.这个是最终完成后的样式（是不是觉得瞬间高大上了）：

现在就说一下我是怎么解决的，方法很笨，请大家勿喷

1.首先这个checkbox是由三部分组成的

这是css代码：

.lg_rpw{border:1px #fff solid;visibility:hidden;position:absolute;width:20px;height:20px;}
.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;}
.lg_remember{float:left;width:24px;height:24px;margin-right:10px;}

这是html代码：

这是js代码：

$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).attr('checked');
if(tfchecked=='checked') {
$('#rem_pass').append('<img src="{SITE_PATH}app/css/image/rem_pass.png" alt="" />');
}else {
$('#rem_pass').children().remove();
}
});
});

第一部分，最外层的div框，用来框住checkbox控件和一个label控件然后定位

第二部分，一个checkbox，其实自始至终这个checkbox的样式是根本改变不了的，这里只是做了一个障眼法

第三部分，一个label控件，这个label才是样式的关键。

---------------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------

设置checkbox的样式为：visiibility:hidden，意思是让checkbox不可见，但它是存在的

然后用一个label控件使用position:absolute;定位放到它的上面，绑定起来，这样点击label同时也相当于点击了checkbox

然后设置label控件的边框为圆角，这里我为了简单没有进行浏览器的兼容，如果需要再多浏览器中使用请在前面加上-webkit,等标签，可去百度。

然后就是加入一个对号的图标了。到这里就基本上大功告成了，只是还没有点击的效果

所以最后就要使用jq加上动态效果

这里的jq代码十分简单就不仔细讲解了。好了！上午的任务算是完成了，下午继续死磕。。。。。干巴爹哦！

--------------------------------------------------------------------------------------我是分割线-------------------------------------------------------------------------------------

没想到还没有完，刚才在ie下测试的时候发现image会放在label上面，这样当点击对号图片的时候不会有反应，只有点击到label时候才会好使，所以我把这个图片放到了label的background-image样式里，修改如下：

.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;background-image:url(image/rem_pass.png);background-repeat:no-repeat;}

加上了一个background-image属性，然后相应的html代码和js代码也需要修改，修改如下：

HTML代码：

这里只是将img标签去掉了。

js代码：

$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).prop('checked');
if(tfchecked) {
$('#rem_pass').css('background-image','');
}else {
$('#rem_pass').css('background-image','url(image/rem_pass.png)');
}
});
});

刚才发现使用checkbox的attr来获取是否选中是不对的，需要使用prop来获取布尔值，返回true，false

这里我发现当tfchecked的值为真的时候应该加上background-image，但是发现却是相反的，当返回值是true的时候需要去掉background-image，下面我会继续查看这个问题到底是为什么。

----------------------------------------------------------------------------这里找到了一个解决办法--------------------------------------------------------------------

我把background-image属性单独写入一个样式里：

css代码：

.lg_rpw{border:1px #fff solid;visibility:hidden;position:absolute;width:20px;height:20px;}
.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;}
.lg_tupian{background-image:url(image/rem_pass.png);background-repeat:no-repeat;}
.lg_remember{float:left;width:24px;height:24px;margin-right:10px;}

这里我只是去掉了lg_rpw里面background-image属性，然后加入了一个新的lg_tupian样式

HTML代码：

这里给label加入了一个新的样式

js代码：

$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).prop('checked');
if(tfchecked) {
$('#rem_pass').addClass('lg_tupian');
}else {
$('#rem_pass').removeClass('lg_tupian');
}
});
});

到这里就完美了！！有没有发现js代码也变得简洁了，当tfchecked为true的时候代表checkbox被选中了，然后加入了background-image这个样式，就出现了对号，当tfchecked为false的时候代表checkbox没有被选中，然后移除background-image这个样式，对号就不见了。OK！下班了，吃饭去！