我正在使用iCheck插件来自定义复选框.我需要在选中一个或多个复选框时显示某些文本,并在未选中任何复选框时隐藏文本.
我当前的代码在第一次单击时显示文本,但不会隐藏它,除非我再单击2次.我有多个复选框,如果选中其中一个,则显示文本,否则隐藏文本.有人有任何想法吗？该插件有:
ifChecked
ifChanged
ifClicked
ifUnchecked
ifToggled
ifDisabled
ifEnabled.......
回调....这是插件功能
$('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>
还有selectpicker旁边checkbox.我想如果复选框被选中,selectpicker将被启用,如果未选中,则selectpicker将被禁用.我写了这个不起作用(这是小提琴):
$('.checkBox').on('ifChecked', function(event) {
$(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');
});
$('.checkBox').on('ifUnchecked', function(event) {
$(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});
我正在尝试集成JQuery.iCheck(checkbox&Radio buttons样式插件).我在这里遵循了一些建议说,集成jQuery插件以与Angular完全兼容的方法ngRepeat是使用directives.
所以我实施了一个directive:
webApp.directive('icheck', function($timeout, $parse) {
return {
link: function($scope, element, $attrs) {
return $timeout(function() {
var ngModelGetter, value;
ngModelGetter = $parse($attrs['ngModel']);
value = $parse($attrs['ngValue'])($scope);
return $(element).iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal-grey',
checkboxClass: 'icheckbox_minimal-grey',
increaseArea: '20%'
}).on('ifChanged', function(event) {
if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
$scope.$apply(function() {
return ngModelGetter.assign($scope, event.target.checked);
});
}
if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
return $scope.$apply(function() {
return ngModelGetter.assign($scope, value);
});
}
});
}); …jsFiddle 在这里.
我是Javascript的新手,无法在iCheck页面上关注文档.我已经按照这里看起来非常相关的StackOverflow问题的答案,但是无法获得警告以弹出显示我选择的值.有人能指出我正确的方向吗？
HTML
<p>Are you sure you want to have your details removed from our marketing list?</p>
<div id="unsubscribe_radio">
<ul>
<li>
<input type="radio" name="iCheck" value="yes">
<label>Yes</label>
</li>
<li>
<input type="radio" name="iCheck" value="no">
<label>No</label>
</li>
</ul>
</div>
使用Javascript
$(document).ready(function () {
$('input').iCheck({
radioClass: 'iradio_flat-orange'
});
$("input:radio[name=iCheck]").click(function () {
var value = $(this).val();
alert("You clicked " + value);
});
});
基本收音机盒
<div class="adv_filter">
<li>
<input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
</li>
<li>
<input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
</li>
</div>
iCheck转换
<!-- iCheck output format
<div class="adv_filter">
<li>
<div class="iradio_square-orange checked" aria-checked="true" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; …我无法在任何浏览器中显示iCheck iCheckbox插件.
这是一个jSFiddle.iCheck依赖于jQuery 1.7+.
我没有任何选项初始化它:
$(".ex-f").iCheck();
正如您所看到的那样,如果您检查DOM,则输入元素将被iCheckbox div包装.但是,<input>和<ins>元素的不透明度都设置为0.
通过jQuery改变它们的不透明度,你得到这个:http://jsfiddle.net/buRq7/
不幸的是,它仍然无效.有没有人有任何建议或经验让这个工作？
我正在使用rails 4和资产管道.
编辑: 我只是意识到我没有选择库(纯JS)作为的jsfiddle框架选项,似乎即使不改变不透明度的工作(见:http://jsfiddle.net/buRq7/5/).但是,文档明确说明它依赖于jQuery(或Zepto).将框架选项切换到jQuery 1.10.1会导致iCheckbox再次无法运行...不确定为什么会这样.
iCheck仅在第一页上使用数据表.当我导航到任何其他页面时,它会显示复选框,但它们没有应用iCheck.这段代码有帮助,但不会100%工作.
function turn_on_icheck(checkboxClass)
{
$('input[type=checkbox]').iCheck({
checkboxClass: checkboxClass
});
}
$('.data-table').on('page', function() {
turn_on_icheck();
});
当我转到第二页时,它现在显示一切正常,但如果我回到之前访问过的页面,则复选框不存在.在我看来它似乎导致错误,因为已经有一个iCheck在那里运行的实例.有没有办法检查是否有一个正在运行？
我使用"iCheck jQuery"来修改复选框的样式.但是当我添加一个iCheck脚本时 - 我的onlick metod停止工作.为什么会这样？
<input id="my_cb" type="checkbox" value="yes_n" onclick="hide_row_metod()"/>
<script>
$(document).ready(function(){
$('#my_cb').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
我的剧本:
<script>
function hide_row_metod() {
if(document.getElementById('my_cb').checked){
document.getElementById('row1').style.display = "none";
}else{
document.getElementById('row1').style.display = "inline";
}
}
</script>
我使用梦幻般的iCheck插件在我的表单中设置复选框的样式.
使用该插件,我可以调用$('input').iCheck()以应用所需的外观和功能.
但是,我坚持在.iCheck()动态创建的复选框上调用该函数.
在ajax调用中,我在success函数中按如下方式构建复选框; 这是一个$.each块,但为了简单起见,我只在声明中包含了代码.
var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>');
el.append(chk);
DOM的树中已存在elid的id 在哪里container,并且n我的对象作为JSON返回
在构建了复选框之后,我$('#container input').iCheck();明显地打电话给了我没什么特别的,但标准的复选框.我认为这是因为复选框是动态创建的,并且在.iCheck()调用之后.但即使我创建了复选框并调用.iCheck()结果也是一样的.
任何人都可以指导我吗？
我正在使用iCheck框架,我有两个输入
<input name="group" id="id1" type="radio" checked>
<input name="group" id="id2" type="radio">
<input name="group" id="id3" type="radio">
<input name="group" id="id4" type="radio">
点击后我调用ajax函数.如果出现故障,我想将checked属性设置为先前选择的输入.
var currentChecked = $("input[name='group']:radio:checked");
$("input[name='group']:radio").each(function() {
$(this).on('ifChecked', function(){
$.ajax({
url: "/ajax/something/"
})
.done(function (data) {
currentChecked = $(this);
})
.fail(function (data) {
$(this).removeAttr('checked');
currentChecked.prop('checked', true);
});
});
});
但这不会重置已选中的复选框.有什么我从iCheck框架中看不到的东西？有解决方案吗