Not able to uncheck a radiobutton after selecting another

Question

Here's what I have setup. If I have radiobutton1 already checked when the page load (it has checked="checked" in view source) then I try to clear that after selecting radiobutton2, it's not removing the checked attribute on radiobutton1 after selecting radiobutton2: '

if($('#' + radiobutton_1_ID).is(':checked'))
    UncheckRadioButton('#' + radiobutton_2_ID);


// Utility method to clear a radiobutton's checked attribute
function UncheckRadioButton(radiobuttonID)
{
    alert("radiobuttonID: " + radiobuttonID);
    radiobuttonID.removeAttr("checked"); 
}

after selecting radiobutton2 and doing a view source I see no checked="checked" on radiobutton2 and still see checked="checked" on radiobutton1 ...I thought this would clear that on radiobutton1? and why is there no checked="checked" on radiobutton2 when I view source when it's clearly checked right in front of my eyes?!?!

UPDATED

here is my code. I know that the if statement portions are getting hit so that's not the issue and I know the radiobuttonIDs are correct values:

    var ccRadioBtn = ccRadioButton; // credit card radio button ID
    var paypalRadioButton = payPalRadioClientID;

    $('#placeOrderContainer').show();

    if (paypalIsSelected()) 
    {
        UncheckRadioButton(checkRadioBtn);
        UncheckRadioButton(ccRadioBtn);

        $('#paypalOptionDetails').fadeIn(800); //show
        $('#ccInfo').hide();
        $('#placeOrderContainer').hide();

        ClearCreditCardFields();
    }
    else 
    {
        // force a clear on any previously selected payment options
        CheckRadioButton(ccRadioBtn); // default to credit card radio button
        UncheckRadioButton(paypalRadioButton);
        UncheckRadioButton(checkRadioBtn);

        $('#ccInfo').fadeIn(800); //show
        $('#paypalOptionDetails').hide();

        //TODO: Create a reusable method for the if statement check
        if($('#checkInfo') != null) {$('#checkInfo').hide();}
    }
}

function UncheckRadioButton(radiobuttonID)
{
    $('#' + radiobuttonID).removeAttr("checked"); 
}


function CheckRadioButton(radiobuttonID)
{
    $('#' + radiobuttonID).attr('checked', true);
}

The problem is if one radio button is defaulted with checked="checked" and then I click another radio button, it's supposed to clear the first radio button's checked attribute but it's not . And the second radio button that I changed to has no checked="checked" as it should. I can see this when I view source. Not sure why that is not working.

Answer 1

You're passing a string here:

UncheckRadioButton('#' + radiobutton_2_ID);

But trying to use it as a jQuery object here:

radiobuttonID.removeAttr("checked");
//which is actually doing this:
"#something".removeAttr("checked"); //.removeAttr() is not a function for string

You need to wrap it to use it as a selector, like this:

$(radiobuttonID).removeAttr("checked");

As for the view source...it depends in the browser, IE for example will show the original source of the page, not the state you're currently viewing.