如何使用jQuery Uniform库取消选中复选框


144

我在取消选中时遇到问题checkbox。看看我正在尝试的jsFiddle

   $("#check2").attr("checked", true);

我使用统一的造型的checkbox,它根本不工作,检查/取消选中checkbox

有任何想法吗?


无论是在谷歌Chrome和Firefox它不为我工作
给予好评

Answers:


108

查看他们的文档,他们具有$.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);
});

5
@mkoryak:在中可以正常使用1.4.4,但指向js和css文件的链接已断开。这是更新的小提琴。如果您的意思是在其中专门存在问题1.6,那么这可能是对的,因为jQuery更改了,然后恢复了的行为.attr()。使用1.6或更高版本,您实际上应该使用.prop()
user113716 2011年

我可以看到更新的jsFiddle和原始版本之间完全没有区别(直到复选框2的标签错误),除了更新的版本对我有用,原始版本没有作用!?!?
iPadDeveloper2011

顺便说一句,所有这些像素绘制的Uniform形式在Retina上看起来都非常性感
化身

不适用于我jsfiddle也不起作用或令人困惑
matthy 2014年

367

一个简单的解决方案是执行此操作,而不是使用统一:

$('#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()用于复选框选中的值


2
这让我在jQuery 1.7.1中保持选中的属性不变。可行,但不执行您认为应该做的事情。
2rs2ts 2014年

24
$("#chkBox").attr('checked', false); 

这对我有用,它将取消选中该复选框。以同样的方式,我们可以使用

$("#chkBox").attr('checked', true); 

检查复选框。


4
我认为最好使用.prop()函数而不是.attr()。否则,它将无法始终按预期运行……
Simon Steinberger 2014年

13

如果您使用统一1.5,则使用此简单技巧来添加或删除check属性
只需在复选框的输入字段中添加value =“ check”。
在添加该代码uniform.js> function doCheckbox(elem){>.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');
}

如果您使用统一2.0,则使用此简单技巧
在此classUpdateChecked($tag, $el, options) {功能更改中添加或删除check属性

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);
    }

}

7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

这对我有用。


非常感谢你。我可以确认这是最简单的解决方案。
Rudolph Opperman

2

只是这样做:

$('#checkbox').prop('checked',true).uniform('refresh');

1

$.uniform.update()如文档中所述,如果您使用javascript更新元素,则需要致电。


1

首先,checked可以具有的值checked或空字符串。

$("input:checkbox").uniform();

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});

传递布尔值作为的值没有错checked
user113716 2011年

但是我们没有写HTML标记。我们正在设置属性HTMLInputElement。看看checked属性。
user113716 2011年

没关系…我也不很明白为什么它无效……
nyuszika7h 2011-02-15

仅在1.6+版本中支持传递布尔值,然后您必须将checked属性设置为“ checked”或将其删除。
mkoryak 2011年


1

 $("#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/>


0

另一种方法是

$('#check2').click();

这导致统一检查复选框并更新其蒙版


-1

类似于btn广播的复选框

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.