Javascript 侦听正在选中的引导复选框

我正在使用名为：核心管理的引导主题

这是我写的代码：

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

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

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

    }
});

但是它实际上并没有改变输入字段，而是改变了

元素的类

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

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

---

我就是这样解决的。

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

但是，对于您的特定问题，请尝试以下代码

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

你可以得到一个有效的例子

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

相反，您可以在div

icheckbox\u flat-aero

上列出单击事件

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

---

检查示例

@Srihari是否正确，除了选择器。实际上，

输入

没有被修改

onclick

，但是

div

会：

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

---

最终解决了这个问题，因为我正在单击一个div元素，所以我必须监听该元素的click事件，然后检查div是否有类以及checkbox的id是什么

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

---

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

JS代码：

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

这样，将为所有复选框添加常规事件

---

快乐编码：）

模板看起来正在使用，它有回调：

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

---

只要我的五分钱，如果有人会有同样的问题

我需要准确的复选框状态。我在这里不工作。这一个已经为我完成了所需的状态传递：

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

---

链接到文档：

您需要通过绑定到ifchecked事件

使用on（）方法将它们绑定到输入：

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

这将更改选中状态

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

这对我有用

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

你可以用这个：

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

---

你确定twitte bootstrap在选中复选框时不会将checked属性添加到你的复选框中吗？@dreamweiver是的，我使用的是核心管理主题，你可以在这里看到示例并检查checkbox元素，它只会更改类。但我看不到任何复选框。@dreamweiver抱歉，按左面板上的表单，就会有复选框。我想我的方法应该比较简单：）不管怎样，用你的逻辑，它也会起作用。这对我没有帮助，看看类是如何变化的，这是我使用的主题：。按下复选框并检查element@Jaanus更新有帮助吗？？你还卡住了吗？如果您想从服务器端识别检查，您可能会感兴趣的是，为什么不能为div标记本身添加一个事件，这将减少对父元素的dom搜索。@dreamweiver

是由boostrap自动生成的，因此我无法在那里添加任何内容。那么如果它是动态生成的，只有在加载该事件后，您才会触发该事件，因此无需担心：）您需要与引导同步才能完成任务，否则您的it将变得不稳定

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

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