Issue on Jquery Checkbox Toggle with Button

Question

Can you please take a look at This Demo and let me know why the toggle is not functioning well on checking and Un-checking the checkbox?

Here is the code I have:

$(document).ready(function(){   
    $('.checker').toggle(
        function () { 
            $('#check').attr('Checked','Checked'); 
        },
        function () { 
            $('#check').removeAttr('Checked'); 
        }
    );
});

Thanks

score 2 · Accepted Answer · answered Mar 04 '14 at 00:08

2

Since you are looking for switching the checked state there is no need to use .toggle(). Also use .prop() instead of .attr() to set the checked state

$(document).ready(function () {
    $('.checker').click(function () {
        $('#check').prop('checked', function (i, checked) {
            return !checked
        });
    });
});

Demo: Fiddle

.toggle() is removed in jQuery 1.9, so better do not use it any further

answered Mar 04 '14 at 00:08

Arun P Johny

384,651
66
527
531

Thanks Arun, can you please also let me know how I can check the state of the checkbox in your method? – Behseini Mar 04 '14 at 00:17
@Behseini to check `$('#check').prop('checked', true)`, to uncheck `$('#check').prop('checked', false)` – Arun P Johny Mar 04 '14 at 00:19
sorry I just confused you what I mean by "check" getting the current state of the checkboc? I mean if it is checked or unchecked? – Behseini Mar 04 '14 at 00:22
@Behseini if you want to read the state then `var checked = $('#check').prop('checked');` or `var checked = $('#check').is(':checked');` – Arun P Johny Mar 04 '14 at 00:24

score 1 · Answer 2 · edited May 23 '17 at 12:03

1

Try this

$(document).ready(function(){   
    $('.checker').toggle(
        function () { 
            $('#check').attr('Checked','Checked'); 
        },
        function () { 
            $('#check').prop('checked', false)
        }
    );
});

Updated fiddle: http://jsfiddle.net/57aq6/

Courtesy of this question: Remove attribute "checked" of checkbox

edited May 23 '17 at 12:03

Community

1
1

answered Mar 04 '14 at 00:03

Dan

9,391
5
41
73

Thanks Daniel it works now but on small issue, How can I check the checkbox already have the attribute? I mean what if a user directly checked or uncheckd the checkbox? how can I add or remove the attr when it required? – Behseini Mar 04 '14 at 00:07
I see what you mean, you should add some logic around whether it's checked or not. There are many questions on SO on this, checking if checkbox is checked. – Dan Mar 04 '14 at 00:11

score 1 · Answer 3 · edited May 23 '17 at 12:03

Now it works I've updated it, the problem was in the attribute Checked and error in the HTML:

jQuery

$(document).ready(function(){   
    $('.checker').toggle(
        function () { 
            $('#check').attr('checked','checked'); 
        },
        function () { 
            $('#check').removeAttr('checked'); 
        }
    );
});

Here is another answer that covers the problem

Jquery Toggle Checkbox

score 1 · Answer 4 · answered Mar 04 '14 at 00:05

1

Actually I don't know what is the problem with this code, but what I use to make this work is using:

    $('#check').attr('Checked',true);

and

    $('#check').attr('Checked',false);

It works just fine.

answered Mar 04 '14 at 00:05

user2517028

784
1
11
25

Issue on Jquery Checkbox Toggle with Button

4 Answers4