javascript - 收听引导复选框被选中

Question

我正在使用名为：Core Admin http://wrapbootstrap.com/preview/WB0135486的引导主题

这是我写的代码：

<div class="span6">
    <input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
    <label for="icheck1">Needed</label>
</div>

引导程序为我生成了以下代码：

<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
    <input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>

这是结果：

所以基本上它为我做了一个漂亮的复选框。每次单击复选框时，它都会checked向 div 添加一个类：

 <div class="icheckbox_flat-aero checked" style="position: relative;">

所以起初我想听像这样改变的输入字段

$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
    if (this.checked) {

    }
});

但它实际上并没有改变输入字段，而是改变了<div>元素的类。

我怎么能听到复选框被选中？

Answer 1

$('input#Checkbox1').change(function () {
    if ($('input#Checkbox1').is(':checked')) {
        $('input#Checkbox1').addClass('checked');
    } else {
        $('input#Checkbox1').removeClass('checked');
    }
});

我就是这样解决的。

Answer 2

该模板看起来正在使用https://github.com/fronteed/iCheck/，它具有回调：

$('input[type="checkbox"][name="userAccessNeeded"]').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

或者还有：

$('input[type="checkbox"][name="userAccessNeeded"]').iCheck('check', function(){
  alert('Well done, Sir');
});

这应该适用于各种方法：

// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');

Answer 3

文档链接：http: //fronteed.com/iCheck/

您需要通过绑定到 ifchecked 事件

使用 on() 方法将它们绑定到输入：

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

这将改变选中状态

$('input').iCheck('check'); — change input's state to checked

Answer 4

这对我有用

jQuery('input.icheck').on('ifChanged', function (event) {
    if ($(this).prop('checked')) {
        alert('checked');
    } else {
        alert('unchecked');
    }
});

Answer 5

终于像这样解决了，因为我点击了一个 div 元素，所以我必须监听它的点击事件，然后检查 div 是否有类以及复选框的 id 是什么。

 $('.iCheck-helper').click(function () {
    var parent = $(this).parent().get(0);
    var checkboxId = parent .getElementsByTagName('input')[0].id;
    alert(checkboxId);
});

Answer 6

只要我的五美分，如果有人会遇到同样的问题..

我需要确切的复选框状态。切换在这里不起作用。这个已经为我完成了所需的状态传递：

$('.iCheck-helper').click(function () {
    var checkbox = $(this).parent();
    if (checkbox.hasClass('checked')) {
        checkbox.first().addClass('checked');
    } else {
        checkbox.first().removeClass('checked');
    }
        doWhateverAccordingToChoices();
    });

Answer 7

看着您的问题并在过去 1 年以来一直在使用引导程序，我可以肯定地说，所添加的检查类不是由引导程序完成的。添加的检查类也不是内置于 BS 2.3.* 中的属性。

然而，对于您的具体问题，请尝试以下代码。

$('.icheck').click(function(){
    $(this).toggleClass('checked');
});

您可以在此处获得一个工作示例。

更新 1： 复选框不能使用 CSS 按颜色设置样式。因此，开发人员使用插入标签来删除复选框并放入他的样式代码。实际上，指定主题中的 CSS 和 JS 通过放入新的风格化代码来进行样式设置。

相反，您可以在 div 上列出 click 事件icheckbox_flat-aero。

$('.icheckbox_flat-aero').children().on('click',function(){
   alert('checked');
});

检查示例http://jsfiddle.net/hunkyhari/CVJhe/1/

Answer 8

@Srihari 做对了，除了选择器。确实input没有修改onclick，但是div做：

$('.icheckbox_flat-aero').click(function(){
    $(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});

Answer 9

嘿，我希望这个逻辑对你有用

JS代码：

$('.icheckbox_flat-aero').on('click',function(){ 
     var checkedId=$(this,'input').attr('id');
     alert(checkedId);
});

这样，为所有复选框添加了一个通用事件

快乐编码:)

Answer 10

你可以使用这个：

$('input#Checkbox1').on('ifChanged',function() {
   console.log('checked right now');
});