jQuery 听引导复选框被选中

Listen to bootstrap checkbox being checked

提问by Jaanus

I am using bootstrap theme called: Core Admin http://wrapbootstrap.com/preview/WB0135486

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

This is the code I write:

这是我写的代码：

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

And bootstrap generates me this code:

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

<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>

This is the result:

这是结果：

So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checkedclass to the div:

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

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

So at first I wanted to listen the input field being changed like this

所以一开始我想听输入字段是这样改变的

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

    }
});

But it doesn't actually change the input field, but rather changes the class of <div>element.

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

How could I listen to checkbox being checked?

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

回答by DorienCragen

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

i solve it that way.

我是这样解决的。

回答by Chris Edwards

The template looks to be using https://github.com/fronteed/iCheck/, which has callbacks:

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

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

Or there is also:

或者还有：

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

Which should work with a whole range of methods:

这应该适用于一系列方法：

// 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');

回答by Laura Chesches

This worked for me

这对我有用

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

回答by metamagikum

Just my five cents, if anyone would have the same problem..

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

I needed the exact checkbox states. Toggle not worked here. This one has done the required state delivery for me:

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

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

回答by johnny 5

Link to the Documentation: http://fronteed.com/iCheck/

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

You need to bind to the ifchecked event via

您需要通过绑定到 ifchecked 事件

Use on() method to bind them to inputs:

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

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

this will change the checked state

这将改变选中状态

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

回答by Jaanus

Finally solved it like this, since I am clicking on a div element, then I must listen click event of that, and then check if the div has class and what is the id of checkbox.

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

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

回答by dreamweiver

Hey i hope this logic should work for you

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

JS CODE:

JS代码：

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

This way a general event is added for all the checkbox`s

这样就为所有复选框添加了一个一般事件

Happy Coding :)

快乐编码:)

回答by Srihari

Looking at your question and working with bootstrap since the past 1 year, I can definitely say that the checked class being added is not done by bootstrap. Neither is the checked class being added is a property which is built into BS 2.3.*.

从过去 1 年开始查看您的问题并使用 bootstrap，我可以肯定地说，添加的检查类不是由 bootstrap 完成的。添加的检查类也不是内置于 BS 2.3.* 中的属性。

Yet for your specific question try the following code.

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

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

You can get a working example here.

你可以在这里得到一个工作示例。

Update 1:The Checkbox cannot be styled by color using CSS. Hence, the developer is using insert tag to delete the Checkbox and put in his styling code. In effect, the CSS and JS in the specified theme do the styling by putting in the new stylized code.

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

Instead you can listed to the click event on the div icheckbox_flat-aero.

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

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

Check for the example http://jsfiddle.net/hunkyhari/CVJhe/1/

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

回答by EoiFirst

@Srihari got it right except the selector. Indeed the inputisn't modified onclick, but the divdo :

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

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

回答by mo sean

you could use this:

你可以用这个：

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