Why is Jquery adding inline styles to my html?

Question

I am using CSS to restyle a radio group like this:

It's being done by hiding nesting the actual input (the button) inside the label tag, and then setting the input itself to display:none in the CSS, and styling the label itself to become to button, as such:

<label for="likert1" class="likert">
   <input type="radio" id="likert1" name="patientViewGroup" value="1">
   1
</label>

It can be done all with CSS... but because SOME browsers (I'm lookin' at you, IE8 and below) don't recognize the :checked pseudoclass, doing it that way men that your actual input - which is what will pass the value out of the form - doesn't always register that it is checked, so JQuery to the rescue.

I'm now using JQuery to set addClass ".amClicked" when one of the labels is clicked, at which time it also toggles the radio's "checked" attribute to "true," and removes the "amChecked" class from the siblings. Easy, right? Here's that JQuery code:

$('.likert').on("click",function() {
    console.log("clikcy!");
    if(!$(this).hasClass('amChecked')) { 
        $(this).addClass("amChecked");
        $(this).children(":radio").attr("checked",true).css("display","none");
    }
    $(this).siblings().removeClass("amChecked")
                       .children(":radio").css("display","none");
});

Well, it WOULD be, except that JQuery, for some reason, seems hell-bent on adding in-line "style" tag to my <input> that is overriding my display: none; and un-hiding the radio button itself, like #3 below:

And here's what that input code looks like after a click:

<input type="radio" id="likert3" name="patientViewGroup" value="3" 
       checked="checked" style="display: inline-block; " class="amChecked">

Even worse, adding .css("display","none") to my click code (as you can see above) doesn't override it - the button still shows up. If I don't add it to the removeClass line, that button just stays there, unchecked, as so:

SO - can anyone tell me WHY Jquery is adding this, unbidden, to my code, and is there anything I can do to stop or override it? Any help would be greatly appreciated!

Answer 1

Use CSS to set the radio inputs' display, and do not alter it with jQuery.

label.likert > input {
    display: none;
}

Also, to toggle the "checked" attribute, you assign it a value of "checked". To "uncheck", you remove the attribute.

$('label.likert').on('click', function () {
    if (!$(this).hasClass('amChecked')) {
        $(this).addClass('amChecked').children(':radio').attr('checked', 'checked');
    }

    $(this).siblings('.amChecked').removeClass('amChecked').children(':radio').removeAttr('checked');
});

I threw it together in this fiddle.