Jquery and radio buttons

Question

So I have some custom radio buttons which I created using js and some css, now I want when I click on a custom radio button, to set the clicked radio button as checked and the order ones as unchecked, so it should be only one checed radio button at the time.Here is what i tried to do, but doesn't work.

    $('.custom-checkbox li span, .bg-check').live('click', function(){


    $(this).parent().find('span').each(function(){

        $(this).addClass('checked').find('input:radio').attr('checked','');

    });     

    $(this).addClass('checked').find('input:radio').attr('checked','checked');



    return false;
});

Some please help me, I really don't get this.

//LE

function customCheckBox()
{
$('.custom-checkbox li').find('input:radio').hide().wrap('<span />');

$('.custom-checkbox li span, .bg-check').live('click', function(){


    $(this).parent().find('span').each(function(){

        $(this).removeClass('checked').find('input:radio').attr('checked',false);

    });     

    $(this).addClass('checked').find('input:radio').attr('checked',true);

    return false;
});

 }

This is how it works, I find all the radio inputs, and I wrap them with a <span> and the <span> element has some css styling...a custom image.

The Html

                    <ul class="custom-checkbox clearfix">
                    <li><input type="radio" name="ext" id="a" value=".ro"/><label for="a">.ro</label></li>
                    <li><input type="radio" name="ext" id="b" value=".com"/><label for="b">.com</label></li>
                    <li><input type="radio" name="ext" id="c" value=".net"/><label for="c">.net</label></li>
                    <li><input type="radio" name="ext" id="d" value=".org"/><label for="d">.org</label></li>
                    <li><input type="radio" name="ext" id="e" value=".info"/><label for="e">.info</label></li>
                    <li><input type="radio" name="ext" id="f" value=".biz"/><label for="f">.biz</label></li>
                    <li><input type="radio" name="ext" id="g" value=".us"/><label for="g">.us</label></li>
                    <li><input type="radio" name="ext" id="h" value=".eu"/><label for="h">.eu</label></li>
                    <li><input type="radio" name="ext" id="i" value=".mobi"/><label for="i">.mobi</label></li>
                    <li><input type="radio" name="ext" id="j" value=".name"/><label for="j">.name</label></li>
                </ul>

Answer 1

In jQuery, the attributes 'checked' and 'selected' are set with the values true and false.

Assuming that there's no other underlying problem with your code, that should fix it. If it still doesn't work, you need to give a little bit more context, i.e. markup and maybe supporting code.

For a first shot, you would adjust your code like this:

$('.custom-checkbox li span, .bg-check').live('click', function(){
  $(this)
    .closest('.custom-checkbox')
      .find('span')
        .removeClass('checked')
      .end()
    .end()
    .addClass('checked')
      .find('input:radio')
        .attr('checked',true)
      .end();
});