我正在使用名为“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>
然后bootstrap会生成这段代码:
<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>
结果如下:
所以基本上它为我制作了一个漂亮的复选框。每次单击复选框时,它都会向div添加checked
类:
<div class="icheckbox_flat-aero checked" style="position: relative;">
所以一开始我想听这样的输入字段
$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
if (this.checked) {
}
});
但它实际上并没有改变输入字段,而是改变了<div>
元素的类。
我怎么能收听正在检查的复选框?
答案 0 :(得分:8)
$('input#Checkbox1').change(function () {
if ($('input#Checkbox1').is(':checked')) {
$('input#Checkbox1').addClass('checked');
} else {
$('input#Checkbox1').removeClass('checked');
}
});
我这样解决。
答案 1 :(得分:3)
模板看起来正在使用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');
答案 2 :(得分:3)
这对我有用
getContext()
答案 3 :(得分:2)
最后像这样解决了,因为我点击div元素,然后我必须听一下click事件,然后检查div是否有类以及复选框的id是什么。
$('.iCheck-helper').click(function () {
var parent = $(this).parent().get(0);
var checkboxId = parent .getElementsByTagName('input')[0].id;
alert(checkboxId);
});
答案 4 :(得分:2)
只要我的五美分,如果有人会遇到同样的问题..
我需要确切的复选框状态。切换不起作用。这个已经为我完成了所需的状态交付:
$('.iCheck-helper').click(function () {
var checkbox = $(this).parent();
if (checkbox.hasClass('checked')) {
checkbox.first().addClass('checked');
} else {
checkbox.first().removeClass('checked');
}
doWhateverAccordingToChoices();
});
答案 5 :(得分:2)
指向文档的链接:http://fronteed.com/iCheck/
您需要通过
绑定到ifchecked事件使用on()方法将它们绑定到输入:
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
这将改变检查状态
$('input').iCheck('check'); — change input's state to checked
答案 6 :(得分:1)
从过去1年开始,查看您的问题并使用bootstrap,我可以肯定地说,添加的已检查类不是由bootstrap完成的。添加的检查类也不是内置于BS 2.3。*。
的属性但是针对您的具体问题,请尝试以下代码。
$('.icheck').click(function(){
$(this).toggleClass('checked');
});
你可以得到一个有效的例子here。
更新1: 无法使用CSS按颜色设置复选框的样式。因此,开发人员使用insert标签删除Checkbox并输入他的样式代码。实际上,指定主题中的CSS和JS通过添加新的程式化代码来进行样式化。
相反,您可以列出div icheckbox_flat-aero
上的点击事件。
$('.icheckbox_flat-aero').children().on('click',function(){
alert('checked');
});
答案 7 :(得分:1)
@Srihari除了选择器之外做对了。实际上,input
未经修改onclick
,但div
执行:
$('.icheckbox_flat-aero').click(function(){
$(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});
答案 8 :(得分:1)
嘿,我希望这个逻辑适合你
JS CODE:
$('.icheckbox_flat-aero').on('click',function(){
var checkedId=$(this,'input').attr('id');
alert(checkedId);
});
这样就为所有复选框添加了一般事件
快乐编码:)
答案 9 :(得分:0)
您可以使用:
$('input#Checkbox1').on('ifChanged',function() {
console.log('checked right now');
});