自定义复选框,复选框样式修改,重写复选框

查了好多资料复选框写的磨磨叽叽的一大堆废话！

我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用。

html:
<label class="checklist iCheck">
<input class="checkbox" type="checkbox"/>
<span>沪深A股</span>
</label>

css:

/* 复选框自定义样式 Start */
/* label 图片浮动，一般不浮动会显示不全 */
.checklist{float:left;}
/* checkbox 原复选框隐藏 */
.checkbox{opacity:0;filter:alpha(opacity=0);}
/* label 的背景图片 iCheck未选中 iCheck-ed选中 */
.iCheck{background:url(../img/chk_bg1.png) no-repeat;}
.iCheck-ed{background:url(../img/chk_bg2.png) no-repeat;}
/* 复选框自定义样式 End */

js/jq:

$(document).ready(function () {
//判断当前复选框状态，并让label背景图与复选框同步勾选或取消
$(".checkbox").click(function (){
//判断复选框勾选状态
if ($(this).is(':checked')) {
$("label").removeClass("iCheck"); //删除未勾选选背景图
$("label").addClass("iCheck-ed"); //添加勾选态背景图
}else{
$("label").removeClass("iCheck-ed"); //删除勾选选背景图
$("label").addClass("iCheck"); //添加未勾选选背景图
}
});
});

这是css中需要的两个图片，你可以直接保存。

其实你可以做成任意样式，只要你的ps还看的过去。

假如你能ps出常见的十个精美复选框样式：http://blog.csdn.net/chelen_jak/article/details/44827393

那你就完全没有必要用人家的！

得到的样子：

这是一个最简单的例子！

如果你会js/jq，完全可以自己写，写出你想要的东西！

假如你还是不会，那么可以去下载我的例子，已经打包好就等你下载了！

除了这个简单的例子还有一个大的复杂复选框表单，两个例子你可以一起下载。（大的只是js上的逻辑有变化）

简单小例子下载不要积分：

http://download.csdn.net/detail/liujunxin11/9399314

简单的小例子+复杂的大例子=需要3积分：

http://download.csdn.net/detail/liujunxin11/9399307

自定义复选框,复选框样式修改,重写复选框相关推荐

Flutter - desktop 无框窗口、appBar样式修改
对于 macOS: Hide title bar on macOS with Flutter 准备工作: Mac with Xcode installed A Flutter project with ...
自定义滚动条,可解决火狐滚动条默认样式修改不了问题
优化: 优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题背景: 在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试 ...
纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
【微信小程序】checkbox,radio的样式修改
一.checkbox样式修改默认勾选与未勾选样式 wxml <checkbox color="#fff" value="{{id}}" checked= ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
php选框判断,网络编程如何判断php复选框是否被选中
复选框checkbox通常用于php表单提交.本文通过实例给大家介绍php如何判断复选框中的值是否被选中.需要它的朋友可以参考本文中的例子. 本文章向大家介绍两个知识点: 1.php表单提交如何获取复 ...
php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码表单复选框就是checkbox 1.checkbox的应用复制代码代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...

自定义复选框,复选框样式修改,重写复选框

自定义复选框,复选框样式修改,重写复选框相关推荐

最新文章

热门文章