【常用 JS 插件】jQuery iCheck 复选/单选美化插件
iCheck
表单复选框、单选框控件美化插件,主要作用为:
渲染并美化当前页面的复选框或单选框
响应复选框或单选框的点击事件
页面引用
CSS 部分
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
JS 部分
<!-- iCheck 1.0.1 -->
<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>
激活 iCheck
默认情况下 iCheck 是不生效的,需要使用 JS 代码激活,此过程可以指定 iCheck 的皮肤,案例代码如下:
CSS 部分
<input type="checkbox" class="minimal" />
JS 部分
// 激活 iCheck
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({checkboxClass: 'icheckbox_minimal-blue',radioClass : 'iradio_minimal-blue'
});
回调事件
iCheck 提供了大量回调事件,都可以用来监听 change 事件
事件名称 | 使用时机 |
---|---|
ifClicked | 用户点击了自定义的输入框或与其相关联的 label |
ifChanged | 输入框的 checked 或 disabled 状态改变了 |
ifChecked | 输入框的状态变为 checked |
ifUnchecked | checked 状态被移除 |
ifDisabled | 输入框状态变为 disabled |
ifEnabled | disabled 状态被移除 |
ifCreated | 输入框被应用了 iCheck 样式 |
ifDestroyed | iCheck 样式被移除 |
使用 on() 方法绑定事件:
$('input').on('ifChecked', function(event){alert(event.type + ' callback');
});
方法
下面这些方法可以用来通过编程方式改变输入框状态(可以使用任何选择器):
- $(‘input’).iCheck(‘check’);:将输入框的状态设置为 checked
- $(‘input’).iCheck(‘uncheck’);:移除 checked 状态
- $(‘input’).iCheck(‘toggle’);:
- $(‘input’).iCheck(‘disable’);:将输入框的状态设置为 disabled
- $(‘input’).iCheck(‘enable’);:移除 disabled 状态
- $(‘input’).iCheck(‘update’);:
- $(‘input’).iCheck(‘destroy’);:移除 iCheck 样式
案例代码
全选
_checkboxMaster = $(".checkbox-master");
_checkbox = $("tbody").find("[type='checkbox']").not("[disabled]");
_checkboxMaster.on("ifClicked", function (e) {// 当前状态已选中,点击后应取消选择if (e.target.checked) {_checkbox.iCheck("uncheck");}// 当前状态未选中,点击后应全选else {_checkbox.iCheck("check");}
});
判断是否选中
_checkbox.each(function () {// 判断是否选中var delFlag = $(this).is(":checked");if (delFlag) {_idArray.push($(this).attr("id"));}
});
【常用 JS 插件】jQuery iCheck 复选/单选美化插件相关推荐
- html复选框美化插件,js和css3超酷checkbox复选框美化插件
这是一款效果超超酷的js和css3 checkbox复选框美化插件.这个checkbox复选框美化插件最大的特点是可以拖动进行复选框的多选,当你选择一个复选框后,按住它往下拖动,下面的复选框也会被选择 ...
- html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件 分类:代码 日期:2016-08-02 点击(38,744) 下载(0) 来源:未知 收藏 下拉框美化插件经常见到,如之前介绍过的 Drop ...
- 基于jquery的复选树的插件
基于jquery的复选树的插件. 业务需求:复选树,带有多选功能,有子级被选中时父级需要有提示,层级不定,基于jquery. /** name: checkboxTree 复选树结构*//**输入的数 ...
- js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)
一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
- html复选框美化插件,Bootstrap复选框和单选按钮美化插件
awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件.它使用纯CSS编写,没有任何的javascript文件.它通过在原生Bootstrap组件的 ...
- jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现 基础篇知识的实际应用. 纯CS ...
- js,jquery获取复选框checkbox被选中的值
转载:https://blog.csdn.net/qq_35792598/article/details/76646983 <!DOCTYPE html PUBLIC "-//W3C/ ...
- jQuery实现复选框的全选和反选:
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
- 将jQuery的复选框设置为“已选中”?
我想做这样的事情来使用jQuery勾选一个checkbox : $(".myCheckBox").checked(true); 要么 $(".myCheckBox&quo ...
最新文章
- DataParallel 笔记
- CSS教程:div垂直居中的N种方法
- .Net中DataTable的保存
- seaborn 教程_使用Seaborn进行数据可视化教程
- 前端学习(1164):剩余参数02
- Spread基本知识(一)
- Android 基础-2.0 拔打电话号码
- 网易家居专访柯拉尼陶晓松:有所为 有所不为 争创领军品牌
- 警惕,最新SCI/SSCI期刊14本期刊被剔除?
- c语言编译器IDE有iOS,C语言编译器和IDE的选择
- 网络共享计算机权限访问,局域网共享时提示:你没有权限访问,请与网络管理员联系...
- 工作中PUSH用到的统计命令
- C语言经典题目:求阶乘n!=n*(n-1)*...*1,阶乘和s=1!+(2)!+(3)!+...+n!
- linux yum vsftpd,CentOS 7 使用Yum方式安装配置vsftpd服务
- 硬件设计——关于电路设计的一些知识
- python中正负号怎么表示_[转载]python中整数除法的正负号
- 笔记:神经网络与深度学习—绪论
- 蓝桥杯 算法训练 王,后传说
- VScode 配置豆沙绿背景色(source insight同款背景色)
- NWD-Based Model | 小目标检测新范式,抛弃IoU-Based暴力涨点(登顶SOTA)