iCheck组件使用方法总结

Myth丶恋晨 2022-12-04 09:12 211阅读 0赞

### iCheck组件使用方法总结 ###

*   *  常用方法
     *  实例代码

## 常用方法 ##

$(".i-checks").iCheck({ 
            checkboxClass: "icheckbox_square-green",
            radioClass: "iradio_square-green",
        });
    
        $("#isCheckAll").on('ifChecked', function(event) { 
            $('input').iCheck('check');
        });
    
        $("#isCheckAll").on('ifUnchecked', function(event) { 
            $('input').iCheck('uncheck');
        });
    
    	//选中
        $('input[type="checkbox"]').on('ifChecked', function() { 
            $(this).val('1');
        });
    	//未选中
        $('input[type="checkbox"]').on('ifUnchecked', function() { 
            $(this).val('0');
        });

## 实例代码 ##

html

<div class="win_check" data-win-check="1">
    <input type="checkbox" class="flat" id="win_check_1">
    </div>
    
    <input type="hidden" value="0" id="only_win_1" name="only_win[]">
    
    
     <div class="win_check" data-win-check="2">
    <input type="checkbox" class="flat" id="win_check_2">
    </div>
    
    <input type="hidden" value="0" id="only_win_2" name="only_win[]">

js

//一人一奖 win_check 传参写法
    $('.win_check').on('ifChecked', function () { 
        var prize_rank = $(this).attr('data-win-check');
        $('#only_win_' + prize_rank).val(1)
    });
    
    $('.win_check').on('ifUnchecked', function () { 
        var prize_rank = $(this).attr('data-win-check');
        $('#only_win_' + prize_rank).val(0)
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件使用方法

Vue 组件是 Vue.js 应用中可复用的代码块，通过组件可以将一个页面拆分为多个独立的部分，使代码更加清晰，结构更加简洁。以下是使用 Vue 组件的步骤： -------

亦凉/ 2024年03月26日 18:37/ 0 赞/ 100 阅读

相关 SpringCloud组件总结

原链接如下： https://www.processon.com/view/link/64e85fe76b2cbb581a3835bc 访问密码：afGw 如图：

朱雀/ 2024年03月24日 21:29/ 0 赞/ 78 阅读

相关 elementUI-el-table组件使用总结

一、背景 vue2项目中用到el-table这个组件，但基础的功能不够用，所以需要自定义二、表头自定义比如要让表头展现出下面的形式： ![f09934df5

我不是女神ヾ/ 2024年03月23日 15:54/ 0 赞/ 55 阅读

相关 iCheck组件使用方法总结

iCheck组件使用方法总结常用方法实例代码常用方法 $(".i-checks").iCheck({

Myth丶恋晨/ 2022年12月04日 09:12/ 0 赞/ 212 阅读

相关 fastadmin组件之selectpage使用方法

常规用法下面介绍一个最基础的动态下拉列表示例，如下 <input id="c-name" data-rule="required" data-source=

以你之姓@/ 2022年10月20日 01:30/ 0 赞/ 1457 阅读

相关 aspjpeg组件高级使用方法介绍

aspjpeg是一款非常强大的图片处理组件，纯英文版本。不过早已经有免费版和破解版，但是对其进行详细与深入介绍的文章却是不多，即使有也只牵涉到图片缩略和图片水印。可能是因为纯英

深藏阁楼爱情的钟/ 2022年09月18日 05:46/ 0 赞/ 163 阅读

相关 Ionic 组件使用方法

Ionic 组件 1. 布局 > 12 栅格 <ion-grid> <ion-row> <ion-col col-6>苏州</

灰太狼/ 2022年06月07日 10:38/ 0 赞/ 459 阅读

相关 Swing组件的使用【总结】

1. Swing的特点？答：Swing 是第二代GUI开发工具集，javax.swing包被列入Java的基础类库（JFC），Swing建立在AWT，Java2D，Acce

不念不忘少年蓝@/ 2022年05月30日 01:46/ 0 赞/ 249 阅读

相关【转载】iCheck表单美化插件使用方法详解（含参数、事件等）

\\转载于：[https://www.cnblogs.com/caicaizi/p/6070136.html][https_www.cnblogs.com_caicaizi_p

ゝ一世哀愁。/ 2022年01月31日 17:07/ 0 赞/ 281 阅读

相关 Vue组件总结

一什么是组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独

深碍√TFBOYSˉ_/ 2021年07月24日 19:55/ 0 赞/ 457 阅读