聽引導複選框被選中

Question

我使用所謂的引導主題：核心管理 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) { 

    } 
}); 

但它不」實際上改變了輸入字段，而是改變了元素的類別。

我怎樣才能聽取複選框被檢查？

Answer 1

終於解決了它這樣的，因爲我點擊一個div元素上，那麼我一定要聽單擊該事件，然後檢查div有類，複選框的ID是什麼。

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

Answer 2

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

我解決這個問題。

Answer 3

從過去的1年看你的問題和使用bootstrap，我可以肯定地說，被添加的選中的類不是由bootstrap完成的。 BS 2.3中內置的屬性也不會被添加。*。

然而，對於您的具體問題，請嘗試下面的代碼。

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

你可以得到一個工作示例here。

更新1： 複選框無法使用CSS使用顏色進行樣式設置。因此，開發人員正在使用插入標籤來刪除複選框並放入他的樣式代碼中。實際上，指定主題中的CSS和JS通過放入新的程式化代碼來完成樣式。

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

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

檢查的例子http://jsfiddle.net/hunkyhari/CVJhe/1/

Answer 4

@Srihari這樣做是正確的，除了選擇。事實上，input沒有被修改onclick，但div做：

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

Answer 5

嘿，我希望這樣的邏輯應該爲你工作

JS代碼：

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

這樣所有checkbox`s添加一般的事件

快樂編碼:)

Answer 6

該模板看起來使用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 7

鏈接到文檔：http://fronteed.com/iCheck/

，你需要通過

（）方法使用它們綁定到綁定到ifchecked事件輸入：

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

這將改變選中狀態

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

Answer 8

這爲我工作

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