这个插件算是我之前在平台上发布的更新版本，由于现在做移动端居多，普通的select下拉基本都是没用到了，所以我删除了这个方法。这里介绍一下用法。
一、首先是引入，是猿都知道这是必须的。
1 2 3 4 5 6 | <!-- css --><link rel="stylesheet" href="./assets/css/JCheck.css"> <!-- script --><script src="./assets/js/jquery-1.11.3.min.js"></script><script src="./assets/js/JCheck.js"></script> |
还是老样子，样式都是自己根据项目需求写的，这里引入的css文件只是简单的将我radio跟checkbox给隐藏掉，就一点代码而已，看过代码的童鞋可以不引，自己写也行的，类名什么的都可以根据自己的习惯来，自定义嘛~~
跟之前不一样的是，我现在是将单选按钮跟复选框用label标签包起来的，这用法相信大部分童鞋都明白（点击整个label标签都可以操作到里面的单选按钮或者复选框），这样可以减少很多没必要的js操作
二、单选按钮
单选按钮涉及到一个组的问题，我在label标签多加了一个dataset，以data-name这个属性来区分组，需要注意的是，这个data-name的值必须跟里面的radio的name值一样，不然会出现问题。代码示例如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <label class="u-radio" data-name="radio2"> <input name="radio2" type="radio"> <i class="icon"></i> <span class="text">按钮-2</span></label><label class="u-radio" data-name="radio2"> <input name="radio2" type="radio"> <i class="icon"></i> <span class="text">按钮-2</span></label><label class="u-radio" data-name="radio2"> <input name="radio2" type="radio" checked> <i class="icon"></i> <span class="text">按钮-3</span></label> |
如果你想默认选中其中一个按钮，只需要在里面radio表单加一个checked属性就可以了，这个默认的表单的用法是一样的，然后就是调用js：
1 2 3 4 | $('.u-radio').jRadio({ checkedClass: "z-checked", // 选中状态类名 onChange: function (element) {} // onchange回调，返回当前选中项DOM元素}); |
三、复选框
跟单选按钮比起来，复选框就简单得多了，他没有组的困扰，一切都跟默认的checkbox用法一模一样，就是多了个自定义样式的内部标签。直接示例代码：
1 2 3 4 5 6 7 8 9 10 11 12 | <label class="u-checkbox"> <input name="checkbox" type="checkbox"> <i class="icon"></i> <span class="text">复选框</span></label><label class="u-checkbox"> <input name="checkbox" type="checkbox"> <i class="icon"></i> <span class="text">复选框</span></label><label class="u-checkbox"> <input name="checkbox" type="checkbox" checked> <i class="icon"></i> <span class="text">复选框</span></label> |
然后调用js，参数基本是跟radio的一样：
1 2 3 4 | $('.u-checkbox').jCheckbox({ checkedClass: "z-checked", // 选中状态类名 onChange: function (element) {} // onchange回调，返回当前选中项DOM元素}); |
嗯~基本用法就到这里结束了。
最后，?嗦一下，希望各位有更好的写法的童鞋给我留个言，大家互相学习学习，我是个毕业不到一年的小菜鸟，大部分会的都是自己百度学的，可能跟国际接不上轨，希望有大神来给我接接轨~~~o(∩_∩)o 哈哈~~
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： WEB颜色选择器
- 下一个特效： HTML表格数据导出为CSV|XLS|TXT|SQL格式的jQuery插件