【常用 JS 插件】jQuery iCheck 复选/单选美化插件

iCheck是一款用于美化和增强HTML复选框及单选框的jQuery插件,提供多种皮肤,能响应点击事件,并支持通过编程方式改变输入框状态。文章介绍了如何引用iCheck,激活插件,使用回调事件,以及相关的方法,并提供了全选功能和判断选中状态的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
ifUncheckedchecked 状态被移除
ifDisabled输入框状态变为 disabled
ifEnableddisabled 状态被移除
ifCreated输入框被应用了 iCheck 样式
ifDestroyediCheck 样式被移除

使用 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"));
   }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值