🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
   在app开发中会经常使用到开关按钮。显示效果如下:  ![](https://box.kancloud.cn/2016-02-23_56cbb4b8b5266.jpg) 在jqMobi中实现也很简单。   实现上边的效果代码: ~~~ <div> <label> 记住密码</label><input id="forgetPwd" type="checkbox" name="forgetPwd" value="1" class="toggle"><label for="forgetPwd" data-on="On" data-off="Off"><span></span></label><br /> <label> 自动登录</label><input id="outologin" type="checkbox" name="outologin" value="0" class="toggle"><label for="outologin" data-on="On" data-off="Off"><span></span></label> </div> ~~~ 关键是给radio或者checkbox.使用类属性toggle,并添加一个label标签,使label标签的for属性对应与radio或者checkbox的name,使用data-on来设置选中时显示的文字,使用data-off来设置没有选择的文字。在label中间必须添加一个**span标签。** **判断是否选中的方法:** **例如上边的代码;判断是否记住密码** **应该使用prop方法,而不是使用attr,或者val** ** ** **测试代码:** ** ~~~ alert($("#forgetPwd").attr("checked")); alert($("#forgetPwd").prop("checked")); alert($("#forgetPwd").val()); ~~~ $("#forgetPwd").attr("checked"),$("#forgetPwd").val()始终不变,只有$("#forgetPwd").prop("checked")是改变的。 **选中时**$("#forgetPwd").prop("checked")为true,否则为false。** [官网参考](http://app-framework-software.intel.com/documentation.php#afui/afui_forms)