首页 | 3468 | 743 | 371 | 添加收藏 上一个 下一个
JCheck表单选择

这个插件算是我之前在平台上发布的更新版本,由于现在做移动端居多,普通的select下拉基本都是没用到了,所以我删除了这个方法。这里介绍一下用法。


一、首先是引入,是猿都知道这是必须的。


<!-- 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值一样,不然会出现问题。代码示例如下:


<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:


$('.u-radio').jRadio({
    checkedClass: "z-checked", // 选中状态类名
    onChange: function (element) {} // onchange回调,返回当前选中项DOM元素
});

三、复选框
跟单选按钮比起来,复选框就简单得多了,他没有组的困扰,一切都跟默认的checkbox用法一模一样,就是多了个自定义样式的内部标签。直接示例代码:


<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的一样:


$('.u-checkbox').jCheckbox({
    checkedClass: "z-checked", // 选中状态类名
    onChange: function (element) {} // onchange回调,返回当前选中项DOM元素
});

嗯~基本用法就到这里结束了。


最后,?嗦一下,希望各位有更好的写法的童鞋给我留个言,大家互相学习学习,我是个毕业不到一年的小菜鸟,大部分会的都是自己百度学的,可能跟国际接不上轨,希望有大神来给我接接轨~o(∩_∩)o 哈哈