58

我正在使用 iCheck 插件来自定义复选框。我需要在选中一个或多个复选框时显示某些文本，并在未选中时隐藏文本。

我目前拥有的代码在第一次单击时显示文本，但除非我再单击 2 次，否则不会隐藏它。我有多个复选框，如果选中其中一个复选框，我想显示文本，否则隐藏文本。有人知道吗？该插件有：

ifChecked
ifChanged
ifClicked
ifUnchecked
ifToggled
ifDisabled
ifEnabled.......

回调......这是插件功能

$('input').iCheck({ 
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});

这是我尝试过的..

$('input').on('ifChecked', function(event){
$(".hide").toggle();
});

html

<input type="checkbox">
<div class"hide" style="display:none">Hi there</div>
4

15 回答 15

64

对于那些为此苦苦挣扎的人：

const value = $('SELECTOR').iCheck('update')[0].checked;

这直接返回true或false作为boolean。

于 2016-01-02T07:15:53.637 回答
33

您可以通过以下方式获取复选框和状态的值

$('.i-checks').on('ifChanged', function(event) {
    alert('checked = ' + event.target.checked);
    alert('value = ' + event.target.value);
});
于 2017-02-01T04:21:18.773 回答
21

检查这个：

var checked = $(".myCheckbox").parent('[class*="icheckbox"]').hasClass("checked");

if(checked) {
  //do stuff
}
于 2015-11-06T11:36:52.990 回答
15

所有回调和函数都记录在这里： http: //fronteed.com/iCheck/#usage

$('input').iCheck('check'); — change input's state to checked
$('input').iCheck('uncheck'); — remove checked state
$('input').iCheck('toggle'); — toggle checked state
$('input').iCheck('disable'); — change input's state to disabled
$('input').iCheck('enable'); — remove disabled state
$('input').iCheck('indeterminate'); — change input's state to indeterminate
$('input').iCheck('determinate'); — remove indeterminate state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove all traces of iCheck
于 2015-11-13T09:40:28.250 回答
12

您只需要使用文档中的回调： https ://github.com/fronteed/iCheck#callbacks

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});
于 2014-04-14T15:32:12.337 回答
9

要知道是否选中了 iCheck 框

var isChecked = $("#myicheckboxid").prop("checked");
于 2016-06-14T15:43:29.633 回答
6

我写了一些简单的东西：

当您初始化icheck为：

$('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
});

在其下添加此代码：

$('input').on('ifChecked', function (event){
    $(this).closest("input").attr('checked', true);          
});
$('input').on('ifUnchecked', function (event) {
    $(this).closest("input").attr('checked', false);
});

在此之后，您可以轻松找到原始复选框的状态。我编写了这段代码用于使用icheckingridView并通过 C# 从服务器端访问它的状态。

只需从其id找到您的复选框。

于 2016-05-30T14:16:54.597 回答
5

将此代码用于 iCheck： 

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChanged', function(e) {
    // Get the field name
    var isChecked = e.currentTarget.checked;

    if (isChecked == true) {

    }
});
于 2016-04-21T08:03:48.687 回答
3

称呼

element.iCheck('update');

获取元素上的更新标记

于 2015-11-18T09:35:53.213 回答
2

使用以下代码检查是否使用单一方法检查了 iCheck。

$('Selector').on('ifChanged', function(event){

    //Check if checkbox is checked or not
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");
    }else{
        alert("un-checked");
    }
});
于 2017-03-21T06:55:49.433 回答
1

使用此方法：

$(document).on('ifChanged','SELECTOR', function(event){
  alert(event.type + ' callback');
});
于 2018-08-31T14:06:26.913 回答
1 
$('input').on('ifChanged', function(event) {
             if($(".checkbox").is(":checked")) {
                $value = $(this).val();
             }

             else if($(".checkbox").is(":not(:checked)")) {
                $value= $(this).val();
             }
        });
于 2017-04-03T07:23:19.490 回答
1

如果有人对多个icheck()感兴趣。然后，您可以使用以下方法进行操作：

$("#mother_checkbox").on("ifChanged", function(){
        if($(this).is(':checked')) {
            $('.child_checkbox').prop('checked', true);
            $('.child_checkbox').iCheck('update');
        }
        else{
            $('.child_checkbox').prop('checked', false);
            $('.child_checkbox').iCheck('update');
        }
});

它将选中/取消选中所有子复选框。再会 ！

于 2020-01-05T06:59:11.257 回答
0

这对我有用...试试看

// Check #x
$( "#x" ).prop( "checked", true );
 
// Uncheck #x
$( "#x" ).prop( "checked", false );

于 2016-06-22T20:04:24.617 回答
0

您可以将所有复选框包装在父类中并检查.checked..

if( $('.your-parent-class').find('.checked').length ){
  $(".hide").toggle();
}
于 2016-10-14T19:11:35.030 回答