如何使用 jQuery Uniform 库取消选中复选框
Posted
技术标签:
【中文标题】如何使用 jQuery Uniform 库取消选中复选框【英文标题】:How to uncheck checkbox using jQuery Uniform library 【发布时间】:2011-06-27 04:27:48 【问题描述】:我在取消选中 checkbox
时遇到问题。看看我正在尝试的my jsFiddle:
$("#check2").attr("checked", true);
我使用uniform 来设置checkbox
的样式,但它根本无法选中/取消选中 checkbox
。
有什么想法吗?
【问题讨论】:
google chrome 和 firefox 都不适合我 【参考方案1】:一个更简单的解决方案是这样做而不是使用统一:
$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1
这不会触发任何定义的点击动作。
你也可以使用:
$('#check1').click(); //
这将切换复选框的选中/取消选中,但这也会触发您定义的任何点击操作。所以要小心。
编辑:jQuery 1.6+ 使用prop()
而不是attr()
复选框检查值
【讨论】:
这让我在 jQuery 1.7.1 中保留了选中的属性。有效,但没有做你认为应该做的事。【参考方案2】:查看他们的文档,他们有一个 $.uniform.update
功能来刷新“统一”元素。
示例: http://jsfiddle.net/r87NH/4/
$("input:checkbox").uniform();
$("body").on("click", "#check1", function ()
var two = $("#check2").attr("checked", this.checked);
$.uniform.update(two);
);
【讨论】:
@mkoryak:在1.4.4
中工作正常,但 js 和 css 文件的链接已损坏。 Here's an updated fiddle. 如果你的意思是它会在1.6
中出现问题,那么这可能是真的,因为 jQuery 改变了然后恢复了 .attr()
的行为。使用1.6
或更高版本,您应该真正使用.prop()
。
我可以看到更新的 jsFiddle 和原来的完全没有区别(直到复选框 2 的错误标签),除了更新的版本对我有用,而原来的没有!?! ?
顺便说一句,所有这些像素绘制的统一形式在 Retina 上看起来都非常不性感。
对我不起作用,jsfiddle 也不起作用或令人困惑【参考方案3】:
$("#chkBox").attr('checked', false);
这对我有用,这将取消选中该复选框。 同样的方式我们可以使用
$("#chkBox").attr('checked', true);
选中复选框。
【讨论】:
我认为使用 .prop() 函数而不是 .attr() 会更好。否则它不会总是按预期工作......【参考方案4】:如果您使用的是uniform 1.5,那么使用这个简单的技巧来添加或删除 check 的属性 只需在复选框的输入字段中添加 value="check"。 将此代码添加到 uniform.js
> @ 987654324@ > .click(function()
if ( $(elem+':checked').val() == 'check' )
$(elem).attr('checked','checked');
else
$(elem).removeAttr('checked');
如果您不想在输入框中添加 value="check",因为在某些情况下您会添加两个复选框,因此请使用此
if ($(elem).is(':checked'))
$(elem).attr('checked','checked');
else
$(elem).removeAttr('checked');
如果您使用的是uniform 2.0,那么使用这个简单的技巧在classUpdateChecked($tag, $el, options)
函数更改中添加或删除检查属性
if ($el.prop)
// jQuery 1.6+
$el.prop(c, isChecked);
到
if ($el.prop)
// jQuery 1.6+
$el.prop(c, isChecked);
if (isChecked)
$el.attr(c, c);
else
$el.removeAttr(c);
【讨论】:
【参考方案5】:$('#check1').prop('checked', true).uniform();
$('#check1').prop('checked', false).uniform();
这对我有用。
【讨论】:
非常感谢。我可以确认这是最简单的解决方案。【参考方案6】:这样做:
$('#checkbox').prop('checked',true).uniform('refresh');
【讨论】:
【参考方案7】:如果您使用文档中提到的 javascript 更新元素,则需要调用 $.uniform.update()
。
【讨论】:
【参考方案8】:首先,checked
的值可以是checked
,也可以是一个空字符串。
$("input:checkbox").uniform();
$('#check1').live('click', function()
$('#check2').attr('checked', 'checked').uniform();
);
【讨论】:
将布尔值作为checked
的值传递并没有错。
但是我们不是在编写 html 标记。我们在HTMLInputElement
上设置一个属性。查看checked
属性。
没关系……我也不明白为什么它无效……
仅在 1.6+ 中支持传递布尔值,在此之前您必须将选中的属性设置为“已选中”或将其删除。【参考方案9】:
在某些情况下你可以使用这个:
$('.myInput').get(0).checked = true
对于切换,您可以使用 if else with function
【讨论】:
【参考方案10】: $("#checkall").change(function ()
var checked = $(this).is(':checked');
if (checked)
$(".custom-checkbox").each(function ()
$(this).prop("checked", true).uniform();
);
else
$(".custom-checkbox").each(function ()
$(this).prop("checked", false).uniform();
);
);
// Changing state of CheckAll custom-checkbox
$(".custom-checkbox").click(function ()
if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length)
$("#chk-all").prop("checked", true).uniform();
else
$("#chk-all").removeAttr("checked").uniform();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
<input type="checkbox" class='custom-checkbox' name="languages" value="php"> PHP<br/>
<input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
<input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
<input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>
【讨论】:
【参考方案11】:另一种方法是,
使用$('#check2').click();
这会导致统一检查复选框并更新它的掩码
【讨论】:
【参考方案12】:复选框,类似于收音机 btn
$(".checkgroup").live('change',function()
var previous=this.checked;
$(".checkgroup).attr("checked", false);
$(this).attr("checked", previous);
);
【讨论】:
以上是关于如何使用 jQuery Uniform 库取消选中复选框的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 JavaScript 或 jquery 选中/取消选中复选框?
如何使用 JQuery 取消选中 GridView 中的所有单选按钮?
如何取消选中除使用 jQuery 的复选框之外的所有复选框?