Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel