iCheck 检查复选框是不是被选中

Posted 2023-02-22

【中文标题】iCheck 检查复选框是不是被选中

【英文标题】：iCheck check if checkbox is checkediCheck 检查复选框是否被选中

【发布时间】：2014-01-11 05:53:34

【问题描述】：

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

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

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

callbacks....这里是插件函数

$('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>

【问题讨论】：

这可能会给你一些方向:)***.com/questions/2660323/… P.S.帖子有点复杂，我想我会粘贴 is(':checked') 标志，以便您可以相应地使用它。轻弹一个jsfiddle，我应该可以帮助你。

【参考方案1】：

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

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

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

【讨论】：

这里需要传递什么来代替 SELECTOR ？

这是一个 jquery 选择器，例如，如果你想选择一个类，你需要使用 .myClass 如果你想选择一个 id，那么你应该使用 #myID

谢谢，用jquery检查输入时这种方式也有效！

对我来说返回未定义。 TypeError: Cannot read property 'checked' of undefined

@SercanOzdemir 伙计，你真棒（y）

【参考方案2】：

您可以通过

获取复选框的值和状态

$('.i-checks').on('ifChanged', function(event) 
    alert('checked = ' + event.target.checked);
    alert('value = ' + event.target.value);
);

【参考方案3】：

检查一下：

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

if(checked) 
  //do stuff

【讨论】：

这行不通。我正在收集很多 iCkeck-boxed 的checkedclass 状态，但是设置check 类的代码比我读取该类的特定代码慢。因此，这种方法存在时间问题，应避免使用。

【参考方案4】：

所有回调和函数都记录在这里：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

【参考方案5】：

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

$('input').on('ifChecked', function(event)
  alert(event.type + ' callback');
);

【讨论】：

这到底是怎么回答这个问题的？问题很清楚如何确定复选框是否被选中，而不是引发了 type 的事件！

【参考方案6】：

要知道 iCheck 框是否被选中

var isChecked = $("#myicheckboxid").prop("checked");

【参考方案7】：

我写了一些简单的东西：

当您将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);
);

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

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

【讨论】：

这就是我一直在 iCheck 中缺少的东西！谢谢。

我会考虑将选择器指定为：input[type=checkbox],input[type=radio]

【参考方案8】：

将此代码用于 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) 

    
);

【参考方案9】：

打电话

element.iCheck('update');

获取元素上的更新标记

【参考方案10】：

使用以下代码检查是否使用单一方法检查了 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");
    
);

【参考方案11】：

$('input').on('ifChanged', function(event) 
             if($(".checkbox").is(":checked")) 
                $value = $(this).val();
             

             else if($(".checkbox").is(":not(:checked)")) 
                $value= $(this).val();
             
        );

【参考方案12】：

使用这个方法：

$(document).on('ifChanged','SELECTOR', function(event)
  alert(event.type + ' callback');
);

【参考方案13】：

如果有人对多个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');
        
);

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

【参考方案14】：

这对我有用...试试看

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

【参考方案15】：

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

if( $('.your-parent-class').find('.checked').length )
  $(".hide").toggle();