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

From my experience, jQuery is always going to push styles inline. It effects elements, not the page or stylesheet defined styles. It only knows the element exists because you pointed it to that element.

Also, I wouldn't put the radio inside the label. That might be what's causing the problem.

In your stylesheet or where ever your styles are defined:

.hidden {
    display: none;
}

Why not use a class with display:none; instead of a .css()? .addClass('hidden')., .removeClass('hidden') should work.

Then you can use that where ever.

Going to build a fiddle in the mean time to test.

EDIT Here's a fiddle. Actually, just started looking at your jQuery. I'm not sure I see what the intended result is? You just want to click an element and it changes the radio, right?

With radio buttons, you don't have to set something to make them unselected, they will unselect on their own.

If you set up a hidden value instead of display: none; radio values, you're not going to run into issues mentioned in the question's comments. Then you just set a function to change the value of the hidden value based on some attribute of the element you clicked.

Answer 2

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.