js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:42:19

js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧

js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧:本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下：这里使用JS美化仿iPhone风格的单选框和复选框按钮效果，使用了jQuery代码，附有完整实例及使用方法，现在，iPhone风格确实流行，希望大家也喜欢。运行效果截图

推荐度：

点击下载本文 文档为doc格式

导读js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧:本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下：这里使用JS美化仿iPhone风格的单选框和复选框按钮效果，使用了jQuery代码，附有完整实例及使用方法，现在，iPhone风格确实流行，希望大家也喜欢。运行效果截图

本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮。分享给大家供大家参考。具体如下：

这里使用JS美化仿iPhone风格的单选框和复选框按钮效果，使用了jQuery代码，附有完整实例及使用方法，现在，iPhone风格确实流行，希望大家也喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/

具体代码如下：




iPhone风格的单选框和复选框jQuery代码

Step 2 The Javascript


 $(document).ready( function(){ 
 $(".cb-enable").click(function(){
 var parent = $(this).parents('.switch');
 $('.cb-disable',parent).removeClass('selected');
 $(this).addClass('selected');
 $('.checkbox',parent).attr('checked', true);
 });
 $(".cb-disable").click(function(){
 var parent = $(this).parents('.switch');
 $('.cb-enable',parent).removeClass('selected');
 $(this).addClass('selected');
 $('.checkbox',parent).attr('checked', false);
 });
 });

Step 3 The CSS


 .cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(switch.gif) repeat-x; display: block; float: left; }
 .cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
 .cb-enable span { background-position: left -90px; padding: 0 10px; }
 .cb-disable span { background-position: right -180px;padding: 0 10px; }
 .cb-disable.selected { background-position: 0 -30px; }
 .cb-disable.selected span { background-position: right -210px; color: #fff; }
 .cb-enable.selected { background-position: 0 -60px; }
 .cb-enable.selected span { background-position: left -150px; color: #fff; }
 .switch label { cursor: pointer; }
 .switch input { display: none; }