9

我正在使用 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”，此时它还将收音机的“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 不请自来地添加到我的代码中，我能做些什么来阻止或覆盖它吗？任何帮助将不胜感激！

4

2 回答 2

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

我把它放在这个小提琴里。

于 2013-04-05T14:40:35.150 回答
2

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

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

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

.hidden {
    display: none;
}

为什么不使用 class withdisplay:none;而不是 a .css()？.addClass('hidden').，.removeClass('hidden')应该工作。

然后你可以在任何地方使用它。

同时要建立一个小提琴进行测试。

编辑这是一个小提琴。 实际上，刚刚开始查看您的 jQuery。我不确定我看到预期的结果是什么？您只想单击一个元素，它会更改收音机，对吗？

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

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

于 2013-04-05T14:30:01.830 回答