为什么 Jquery 在我的 html 中添加内联样式？

Question

我正在使用 CSS 重新设置广播组的样式，如下所示：

通过将实际输入（按钮）隐藏在标签标签内，然后在 CSS 中将输入本身设置为 display:none，并将标签本身设置为按钮，如下所示：

p>

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

这一切都可以用 CSS 来完成...但是因为某些浏览器（我在看你，IE8 及以下版本）无法识别 :checked 伪类，所以按照你实际输入的方式进行操作 -这会将值从表单中传递出去 - 并不总是记录它被检查过，所以 JQuery 来救援。

我现在使用 JQuery 在单击其中一个标签时设置 addClass ".amClicked"，此时它还将收音机的 "checked" 属性切换为 "true"，并从兄弟姐妹。容易，对吧？这是 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> 中添加内联“样式”标签，这会覆盖我的 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

根据我的经验，jQuery 总是会内联推送样式。它影响元素，而不是页面或样式表定义的样式。它只知道元素存在，因为您将其指向该元素。

另外，我不会将收音机放在标签内。这可能是导致问题的原因。

在您的样式表或您的样式被定义的地方：

.hidden {
    display: none;
}

为什么不用display:none; 而不是.css() 的类呢？ .addClass('hidden')., .removeClass('hidden') 应该可以工作。

那么你可以在任何地方使用它。

打算在测试的同时制作一个小提琴。

编辑这是fiddle. 实际上，刚刚开始查看您的 jQuery。我不确定我看到预期的结果是什么？你只是想点击一个元素，它会改变收音机，对吧？

使用单选按钮，您不必设置任何内容来取消选择它们，它们会自行取消选择。

如果您设置隐藏值而不是 display: none; 单选值，则不会遇到问题 cmets 中提到的问题。然后你只需设置一个函数来根据你点击的元素的某些属性来改变隐藏值的值。

Answer 2

使用 CSS 设置无线电输入的display，不要使用 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。