jquery button to uncheck checkboxes

Question

This task seemed to be very easy, though my code doesn't work.

I have table with some rows, each row has a checkbox, underneath I put button "Remove all" to uncheck checkboxes.

This is my code:

    $('#remove-button').click(function(){
        $('input:checked').prop('checked',false);
        //e.stopPropagation(); // I tried also with this
        // $('input:checked').removeAttr('checked'); // or this syntax
    });

When i click on the button, all inputs are unchecked but this is not happen due to my code because when I comment this snippet, it also happens when I click on the button. I also see that when I click and inputs are unchecked my website seems to refresh because page scrools up.

I also add another button to checked inputs:

    $('#add-button').click(function(e){
        $('input').prop('checked',true);
        //e.stopPropagation(); // I tried also with this
        // $('input:checked').removeAttr('checked'); // or this syntax
    });

When I fire this inputs are checked and in a second my website refreshes and everything disappear.

I use the newest Firefox and Chrome, and jQuery - 1.11 (but checked also with 1.8.0 and 1.7.1).

There is also atatched

Anyone knows what is wrong?

Also attached css file href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css — kuba0506, Aug 01 '14 at 05:55
No, those are buttons without type attribute but I also tried with type="submit" — kuba0506, Aug 01 '14 at 06:03
can you paste your html code including form tag and all your buttons — worldask, Aug 01 '14 at 06:08
Your code is working for me check http://jsfiddle.net/deepakmanwal/x9eDE/. Do you wrap script at `document.ready`? — Manwal, Aug 01 '14 at 06:18
My code works now with e.preventDefault(), but I found one more problem. If any input is checked the tr background is also changed and when unchecked the "remove-button" is disabled. How to managed to makes those two buttons (add/remove) works together, I mean: - when click add and then remove, the Remove-button should disappear as it is after document ready. For now add andd remove works but after sequence add --> remove, the remove button doesn't disappear — kuba0506, Aug 01 '14 at 06:23
It should works together, maybe you have another code that disables remove-button? — Lyubimov Roman, Aug 01 '14 at 06:27
//on/off remove-button while checkbox is checked var checkBoxes = $(':checkbox'); checkBoxes.change(function () { $('#remove-button').prop('disabled', checkBoxes.filter(':checked').length < 1); }); checkBoxes.change(); — kuba0506, Aug 01 '14 at 06:28

score 7 · Accepted Answer · answered Aug 01 '14 at 06:04

'checked' property is boolean but it means when it not exists it is false. If you need not submit on click or don't go to link there is e.preventDefault(). So you need this:

 $('#remove-button').click(function(e) {
    $('input:checked').removeAttr('checked');
    e.preventDefault();
 });
 $('#add-button').click(function(e) {
   var input = $('input.input-to-check')
   input.attr('checked', 'checked');
   e.preventDefault();
 });

you save my life. thank's. – Ashiquzzaman Apr 14 '17 at 05:39 — Ashiquzzaman, Apr 14 '17 at 05:39

jquery button to uncheck checkboxes

1 Answers1