jQuery removeAttr blocks re-adding the attribute

Question

I have a list of checkboxes that I want people to be able to tick individually, or bulk tick/untick for ease of use.

<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>

The markup for the buttons to bulk tick/untick them is:

<p>
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a>
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a>
</p>

and the JavaScript is:

$("#tick-all").click(function () {
    $("input[type=checkbox]").attr('checked', 'checked');
});

$("#untick-all").click(function () {
    $("input[type=checkbox]").removeAttr('checked');
});

but when I click the buttons in the order: tick, untick, tick, then they will only work the first two times, and after that, the checkboxes won't become ticked again.

Use .prop('checked', true); and .prop('checked', false); — Tushar
– Tushar, Commented Aug 9, 2016 at 12:11

jonju · Accepted Answer · 2016-08-09 12:14:21Z

1

Play around with prop() instead of attr

$("#tick-all").click(function () {
    $("input[type=checkbox]").prop('checked', true);
});

$("#untick-all").click(function () {
    $("input[type=checkbox]").prop('checked',false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<p>
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a>
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a>
</p>

answered Aug 9, 2016 at 12:14

jonju

2,7561 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Pandeyz · Accepted Answer · 2016-08-09 12:14:06Z

1

Use

$("input[type=checkbox]").attr('checked', true);
$("input[type=checkbox]").attr('checked', false);

or

$("input[type=checkbox]").prop('checked', true);
$("input[type=checkbox]").prop('checked', false);

answered Aug 9, 2016 at 12:14

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

Shahid Ahmad · Accepted Answer · 2016-08-09 12:15:08Z

1

User Jquery Prop method like below

$("#tick-all").click(function () {
  $("input[type=checkbox]").prop('checked', true);
});

$("#untick-all").click(function () {
  $("input[type=checkbox]").prop('checked',false);
});

answered Aug 9, 2016 at 12:15

Shahid Ahmad

7741 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery removeAttr blocks re-adding the attribute

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related