iCheck检查checkbox是否被选中
我正在使用iCheck插件来定制checkbox。 当一个或多个checkbox被选中时,我需要显示特定的文本,而当没有选中时隐藏文本。
我目前的代码显示在第一次点击的文本,但不会隐藏它,除非我再次单击2次。 我有多个checkbox,并希望显示文本,如果他们之一检查其他隐藏文字。 有人有什么想法吗? 该插件有:
ifChecked ifChanged ifClicked ifUnchecked ifToggled ifDisabled ifEnabled.......
callback….这是插件function
$('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional });
这是我试过的
$('input').on('ifChecked', function(event){ $(".hide").toggle(); });
HTML
<input type="checkbox"> <div class"hide" style="display:none">Hi there</div>
对于那些为此而斗争的人:
var chckValue = $('SELECTOR').iCheck('update')[0].checked;
这直接返回true
或false
作为boolean
。
检查这个:
var checked = $(".myCheckbox").parent('[class*="icheckbox"]').hasClass("checked"); if(checked) { //do stuff }
你只需要使用callback,从文档: https : //github.com/fronteed/iCheck#callbacks
$('input').on('ifChecked', function(event){ alert(event.type + ' callback'); });
你可以通过获取checkbox和状态的值
$('.i-checks').on('ifChanged', function(event) { alert('checked = ' + event.target.checked); alert('value = ' + event.target.value); });
所有的callback函数都在这里logging: http : //fronteed.com/iCheck/#usage
$('input').iCheck('check'); — change input's state to checked $('input').iCheck('uncheck'); — remove checked state $('input').iCheck('toggle'); — toggle checked state $('input').iCheck('disable'); — change input's state to disabled $('input').iCheck('enable'); — remove disabled state $('input').iCheck('indeterminate'); — change input's state to indeterminate $('input').iCheck('determinate'); — remove indeterminate state $('input').iCheck('update'); — apply input changes, which were done outside the plugin $('input').iCheck('destroy'); — remove all traces of iCheck
我写了一些简单的东西:
当你初始化icheck
为:
$('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional });
在它下面添加这个代码:
$('input').on('ifChecked', function (event){ $(this).closest("input").attr('checked', true); }); $('input').on('ifUnchecked', function (event) { $(this).closest("input").attr('checked', false); });
在此之后,您可以轻松find原始checkbox的状态。 我写了这个代码在icheck
中使用icheck
,并通过C#从服务器端访问它的状态。
只需从它的IDfind你的checkbox。
要知道是否选中了iCheck框
var isChecked = $("#myicheckboxid").prop("checked");
呼叫
element.iCheck('update');
获取元素上的更新标记
使用此代码的iCheck:
$('.i-checks').iCheck({ checkboxClass: 'icheckbox_square-green', radioClass: 'iradio_square-green', }).on('ifChanged', function(e) { // Get the field name var isChecked = e.currentTarget.checked; if (isChecked == true) { } });
这对我有用…尝试一下
// Check #x $( "#x" ).prop( "checked", true ); // Uncheck #x $( "#x" ).prop( "checked", false );
你可以将所有checkbox包装在父类中,并检查.checked
的长度。
if( $('.your-parent-class').find('.checked').length ){ $(".hide").toggle(); }
使用下面的代码来检查是否使用单一方法检查iCheck。
$('Selector').on('ifChanged', function(event){ //Check if checkbox is checked or not var checkboxChecked = $(this).is(':checked'); if(checkboxChecked) { alert("checked"); }else{ alert("un-checked"); } });
$('input').on('ifChanged', function(event) { if($(".checkbox").is(":checked")) { $value = $(this).val(); } else if($(".checkbox").is(":not(:checked)")) { $value= $(this).val(); } });