How to remove checked="checked" for unchecked checkboxes with jQuery?

Question

This is my current script

 <script>
        $().ready(function(){

                $('.prettycheckbox').click(function () {
                      $('.prettycheckbox input').removeAttr('checked');
                      $('.prettycheckbox a').removeClass('checked'); 

                      $("a", this).addClass('checked');
                      $("input", this).addAttr("checked");
                });

        });
 </script>

But it's not working well, bceause the part with adding and removing class to links works nice , but for input it doesn't work.

How to make the "checked" checkbox looks like this:

<input class="payment_type" type="checkbox" value="1" name="payment_type" style="display: none;" checked="checked">

and all others look like this?:

<input class="payment_type" type="checkbox" value="1" name="payment_type" style="display: none;">

How to do that? Something like input radio type using jquery and checkboxes?

Answer 1

In,

jQuery 1.6+

To change the property of checkbox you should use the .prop() function.

$('.prettycheckbox input').prop('checked', false);
$('.prettycheckbox input').prop('checked', true);

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

$('.prettycheckbox input').attr('checked', 'checked');

Note: removeAttr is valid, but addAttr is not.