jQuery插件icheck复选框的使用方法

且.为.乐

已于 2024-03-04 11:20:06 修改

阅读量3.2k

点赞数 2

分类专栏：前端文章标签： jquery javascript 前端

于 2022-01-07 15:35:53 首次发布

本文链接：https://blog.youkuaiyun.com/JUN_7777/article/details/122363390

版权

前端专栏收录该内容

10 篇文章

订阅专栏

1 icheck插件的介绍

官网：iCheck官网地址

2 icheck的CDN引用方式

如果不愿意下载插件，可以通过CDN引入插件css和js

<link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>

3 icheck—动态设置选中

    <input id="checkbox" type="checkbox" name="checkbox" value="1"> 复选框

假设有复选框，现在我们通过其进行演示：
(1) 复选框选中

$('input[type=checkbox]').iCheck('check');

(2) 复选框取消选中

$('input[type=checkbox]').iCheck('uncheck');

(3) 将选框的状态反向切换

$('input[type=checkbox]').iCheck('toggle');

(4) 选框禁用

$('input[type=checkbox]').iCheck('disable');

(5) 选框取消禁用

$('input[type=checkbox]').iCheck('enable');

4 icheck—回调

(1) ifChanged：选框状态改变时触发

$('input[type=checkbox]').on('ifChanged', function(){
})

(2) ifChecked：选框选中时触发

$('input[type=checkbox').on('ifChecked', function(){
})

(3) ifUnchecked：选框取消选中时触发

$('input[type=checkbox').on('ifUnchecked', function(){
})

5 举例

5.1

  <body>
      <input id="radio_1" type="radio" name="radio" value="1"> 单选1
      <input id="radio_2" type="radio" name="radio" value="2"> 单选2 

<script>
      // 获取当前已选中的radio value
       $('input:radio[id^="radio_"]:checked').val();
       $(function () {
         $('input:radio[id^="radio_"]:checked').on('ifClicked', function (event) {
         //当点击某个选中的radio，获取当前的 radio 用 $(this).val(); 
           $(this).val(); 
         });
       });
</script>
 </body>