How to uncheck checkbox using jQuery Uniform library

Question

I have a problem with unchecking a checkbox. Have a look at my jsFiddle, where I am attempting:

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

I use uniform for styling the checkbox and it simply does not work to check/uncheck the checkbox.

Any ideas?

both in google chrome and firefox it does not work for me – DarkLeafyGreen Feb 14 '11 at 20:41 — DarkLeafyGreen, Feb 14 '11 at 20:41

score 368 · Answer 1 · edited Mar 01 '13 at 15:38

368

A simpler solution is to do this rather than using uniform:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

This will not trigger any click action defined.

You can also use:

$('#check1').click(); //

This will toggle the check/uncheck for the checkbox but this will also trigger any click action you have defined. So be careful.

EDIT: jQuery 1.6+ uses prop() not attr() for checkboxes checked value

edited Mar 01 '13 at 15:38

Michael Wild

24,977
3
43
43

answered Aug 25 '11 at 14:38

Mr.Hunt

4,833
2
22
28

2

This leaves the checked attribute as-is in jQuery 1.7.1 for me. Works but doesn't do what you think it should. – 2rs2ts Jan 08 '14 at 23:58

score 109 · Accepted Answer · edited Mar 17 '13 at 00:45

109

Looking at their docs, they have a $.uniform.update feature to refresh a "uniformed" element.

Example: http://jsfiddle.net/r87NH/4/

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

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

edited Mar 17 '13 at 00:45

coolaj86

74,004
20
105
125

answered Feb 14 '11 at 20:41

user113716

318,772
63
451
440

5

@mkoryak: Works fine in `1.4.4`, but the links to the js and css files were broken. [Here's an updated fiddle.](http://jsfiddle.net/r87NH/106/) If you mean that it'll have issues specifically in `1.6`, then that's probably true since jQuery changed then reverted behavior of `.attr()`. Using `1.6` or higher, you should really be using `.prop()`. – user113716 Aug 25 '11 at 16:42
I can see absolutely no difference at all between the updated jsFiddle and the original (right down to the mislabeling of checkbox 2), except the updated version works for me and the original didn't!?!? – iPadDeveloper2011 Aug 15 '13 at 02:49
BTW all these pixel-drawn Uniform forms look very *unsexy* on Retina. – BorisOkunskiy Dec 28 '13 at 12:31
did not work for me also jsfiddle does not work or is confusing – matthy Apr 04 '14 at 18:14

score 24 · Answer 3 · edited Sep 05 '13 at 11:41

24

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

This worked for me, this will uncheck the check box. In the same way we can use

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

to check the checkbox.

edited Sep 05 '13 at 11:41

Praveen

55,303
33
133
164

answered Sep 05 '13 at 11:39

user1683014

1,681
1
11
6

4

I think it's better to use the .prop() function instead of .attr(). Otherwise it won't work always as expected ... – Simon Steinberger Feb 28 '14 at 22:39

Sohail Ahmed · Answer 4 · 2013-02-20T05:31:51.663

If you are using uniform 1.5 then use this simple trick to add or remove attribute of check
Just add value="check" in your checkbox's input field.
Add this code in uniform.js > function doCheckbox(elem){ > .click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}

if you not want to add value="check" in your input box because in some cases you add two checkboxes so use this

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

If you are using uniform 2.0 then use this simple trick to add or remove attribute of check
in this classUpdateChecked($tag, $el, options) { function change

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

To

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}

score 7 · Answer 5 · answered Aug 28 '13 at 11:10

7

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

This worked for me.

answered Aug 28 '13 at 11:10

Parijat

814
10
11

Thank you very much. I can confirm that this is the most simple solution. – Rudolph Opperman Nov 27 '17 at 09:49

score 2 · Answer 6 · answered Jan 25 '15 at 13:41

2

Just do this:

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

answered Jan 25 '15 at 13:41

moledet

929
11
19

score 1 · Answer 7 · answered Nov 08 '13 at 17:21

1

In some case you can use this:

$('.myInput').get(0).checked = true

For toggle you can use if else with function

answered Nov 08 '13 at 17:21

Larionov Nikita

117
13

score 1 · Answer 8 · answered Feb 14 '11 at 20:44

1

you need to call $.uniform.update() if you update element using javascript as mentioned in the documentation.

answered Feb 14 '11 at 20:44

Adeel

19,075
4
46
60

score 1 · Answer 9 · answered Feb 14 '11 at 20:49

1

First of all, checked can have a value of checked, or an empty string.

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

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

answered Feb 14 '11 at 20:49

alexia

14,440
8
42
52

There's nothing wrong with passing a boolean as the value of `checked`. – user113716 Feb 14 '11 at 20:54
But we're not writing HTML markup. We're setting a property on the [`HTMLInputElement`](https://developer.mozilla.org/en/DOM/HTMLInputElement). Have a look at the `checked` property. – user113716 Feb 14 '11 at 21:31
Never mind… I don't really understand why it's invalid, either… – alexia Feb 15 '11 at 06:41
passing a boolean value is only supported in 1.6+, before that you had to set the checked attribute to 'checked' or remove it. – mkoryak Aug 25 '11 at 14:41

score 1 · Answer 10 · answered Sep 11 '18 at 04:49

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

score 0 · Answer 11 · answered Feb 14 '11 at 20:42

0

The other way to do is is,

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

this causes uniform to check the checkbox and update it's masks

answered Feb 14 '11 at 20:42

Hailwood

89,623
107
270
423

score -1 · Answer 12 · answered Jun 02 '14 at 21:58

-1

checkbox that act like radio btn

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

answered Jun 02 '14 at 21:58

RaDo

1

How to uncheck checkbox using jQuery Uniform library

12 Answers12

Related