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

Question

我正在使用CSS来重新安排这样一个广播组：

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

<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”，并从中删除“amChecked”类兄弟姐妹。容易，对吗？这是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;无线电值，则不会遇到问题评论中提到的问题。然后，您只需设置一个函数，根据您单击的元素的某些属性更改隐藏值的值。

Answer 2

使用CSS设置无线电输入'display，不要用jQuery改变它。

label.likert > input {
    display: none;
}

此外，要切换“已检查”属性，请为其指定“已检查”值。要“取消选中”，请删除该属性。

$('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。

中