jquery - 为什么 Jquery 向我的 html 添加内联样式？

Question

我正在使用 CSS 重新设计一个广播组的样式:

这是通过隐藏嵌套标签标签内的实际输入(按钮)，然后将输入本身设置为 display:none 来完成的在 CSS 中，并将标签本身设置为按钮样式，如下所示:

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

这一切都可以用 CSS 来完成...但是因为某些浏览器(我在看你，IE8 及以下版本)无法识别 :checked伪类，这样做意味着您的实际输入(即将从表单中传递值的输入)并不总是注册它已被检查，因此 JQuery 可以拯救。

我现在使用 JQuery 在单击其中一个标签时设置 addClass“.amClicked”，此时它还将 radio 的“checked”属性切换为“true”，并从 sibling 。容易，对吧？这是 JQuery 代码:

$('.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");
});

好吧，除了 JQuery，出于某种原因，它似乎一心想在我的 <input> 中添加内嵌“style”标签。那压倒了我的 display: none;并取消隐藏单选按钮本身，如下面的#3:

下面是点击后输入代码的样子:

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

更糟糕的是，添加 .css("display","none")我的点击代码(正如您在上面看到的)不会覆盖它 - 按钮仍然显示。如果我不将它添加到 removeClass 行，该按钮将保留在那里，未选中，如下所示:

那么 - 谁能告诉我为什么 Jquery 会在我的代码中不请自来地添加这个，我能做些什么来停止或覆盖它吗？任何帮助将不胜感激!

Answer 1

使用 CSS 设置 radio 输入的显示，不要用 jQuery 改变它。

label.likert > input {
    display: none;
}

此外，要切换“checked”属性，您可以为其分配一个值“checked”。要“取消选中”，您需要删除该属性。

$('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');
});

我把它放在一起 this fiddle .