html自定义复选框
2016-04-02 14:14
453 查看
自定义复选框的素材:
icon-check-circle.png
![](http://img.blog.csdn.net/20160402140036756)
icon-checked.png
![](http://img.blog.csdn.net/20160402140052928)
checkbox.html(为了方便起见,这里使用到了jQuery)
效果图如下:
未选中状态
![](http://img.blog.csdn.net/20160402140259632)
选中状态
![](http://img.blog.csdn.net/20160402140334632?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
为提交表单时,考虑将复选框的内容进行提交,对上述的自定义复选框进行了如下改进:
运行效果与之前的一致,不同的是加入的隐藏input,用于表单提交时提交数据,当提交的value为1时,表示复选框已被选中;当提交的value为0时,表示复选框未被选中。
icon-check-circle.png
icon-checked.png
checkbox.html(为了方便起见,这里使用到了jQuery)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义复选框checkbox</title> <style> .checkbox { cursor: pointer; padding-left: 25px; color: #000; display: inline-block; height: 18px; line-height: 18px; } .cb-default { background: url(icon-check-circle.png) left top no-repeat; } .cb-checked { background: url(icon-checked.png) left top no-repeat; } </style> </head> <body> <p> <span class="checkbox cb-default">Remember me</span> </p> <script src="jquery.min.js"></script> <script> $('.checkbox').on('click', function() { if($(this).hasClass('cb-default')) { $(this).removeClass('cb-default').addClass('cb-checked'); } else { $(this).removeClass('cb-checked').addClass('cb-default'); } }); </script> </body> </html>
效果图如下:
未选中状态
选中状态
为提交表单时,考虑将复选框的内容进行提交,对上述的自定义复选框进行了如下改进:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义复选框checkbox</title> <style> .checkbox { cursor: pointer; color: #000; display: inline-block; } .checkbox span { display: inline-block; height: 18px; line-height: 18px; padding-left: 25px; } .cb-default { background: url(icon-check-circle.png) left top no-repeat; } .cb-checked { background: url(icon-checked.png) left top no-repeat; } </style> </head> <body> <div class="checkbox"> <input type="hidden" name="checkInfo" value="0"> <span class="cb-default">Remember me</span> </div> <script src="jquery.min.js"></script> <script> $('.checkbox').on('click', function() { $span = $('.checkbox span'); var input = $('.checkbox input')[0]; if($span.hasClass('cb-default')) { $span.removeClass('cb-default').addClass('cb-checked'); input.setAttribute('value', 1); } else { $span.removeClass('cb-checked').addClass('cb-default'); input.setAttribute('value', 0); } }); </script> </body> </html>
运行效果与之前的一致,不同的是加入的隐藏input,用于表单提交时提交数据,当提交的value为1时,表示复选框已被选中;当提交的value为0时,表示复选框未被选中。
相关文章推荐
- HTML设置超链接字体颜色和点击后的字体颜色
- HTML格式化
- html中设置锚点定位的几种常见方法(#号定位)
- HTML学习笔记(十一)内联框架
- Html.BeginForm 与Section、Partial View 和 Child Action
- HTML基础学习笔记
- 用Html写一个简单的登陆界面
- VS2013默认打开html文件没有设计视图的解决办法
- Chapter 13:Understanding HTML&Assignment(2)
- HTML —— 多种空格转义字符
- HTML学习笔记(九)表单
- CSDN博客中嵌入背景音乐
- 抽取html中的所有链接
- HTML <font> 标签
- HTML —— HTML教程|HTML手册|HTML基础|HTML语法
- mac和window下的html开发工具
- HTML学习(七)——框架
- HTML <a> 标签
- 关于HTML中的title换行问题
- 关于VS打开cshtml出现 未能完成该操作。无效指针