Jquery 选中单选按钮样式

我在设置选中单选按钮的样式时遇到了一些问题，我的代码通常是有效的，除非有一个默认选中单选按钮，那么样式将不再有效，直到我选中另一个单选按钮。我的问题是，当默认选中时，如何将相同的样式应用于单选按钮，并且是否可以仅使用CSS来实现

这是我的密码：

HTML

jquery：

$(document).ready(function(){
    $('input:radio').change(function(){
        var $this = $(this);
            $this.closest('.accessOptions').find('div.highlight').removeClass('highlight');
         $this.closest('.option').addClass('highlight');
     });
 });

链接到JSFIDLE:

---

您需要在预检查的元素上运行代码

因此添加

.filter（':checked'）.change（）到您的代码

$(document).ready(function(){
    $('input:radio').change(function(){
        var $this = $(this);
        $this.closest('.accessOptions').find('div.highlight').removeClass('highlight');
        $this.closest('.option').addClass('highlight');
    }).filter(':checked').change();
});


另一个问题是，在HTML中，您将类应用于错误的元素

如果要模拟代码的功能，应将
.highlight
类添加到
div
中，而不是像这样添加
输入

<div class="option highlight">
    <input type='radio' id="1"  name='11' checked='checked' />
    <label for 1>Open to Anyone</label>
</div>


对任何人开放

至少您的代码就是这样做的。
您需要在预先选中的元素上运行代码

因此添加
.filter（':checked'）.change（）到您的代码

$(document).ready(function(){
    $('input:radio').change(function(){
        var $this = $(this);
        $this.closest('.accessOptions').find('div.highlight').removeClass('highlight');
        $this.closest('.option').addClass('highlight');
    }).filter(':checked').change();
});


另一个问题是，在HTML中，您将类应用于错误的元素

如果要模拟代码的功能，应将
.highlight
类添加到
div
中，而不是像这样添加
输入

<div class="option highlight">
    <input type='radio' id="1"  name='11' checked='checked' />
    <label for 1>Open to Anyone</label>
</div>


对任何人开放

至少您的代码就是这样做的。
您可以使用CSS3的
：选中的
选择器

.highlight:checked {
    background: #5479ab;
}

不需要脚本


编辑：

考虑到我在第一次回答时没有注意到的细节，下面是如何将样式应用于所讨论的
收音机的父
div
：

$(document).ready(function(){

    $('input:radio.highlight:checked').parent(".option").addClass("highlight");

    $('input:radio').change(function(){
        var $this = $(this);
            $this.closest('.accessOptions').find('div.highlight').removeClass('highlight');
         $this.closest('.option').addClass('highlight');
     });
 });

您可以使用CSS3的
：选中的
选择器

.highlight:checked {
    background: #5479ab;
}

不需要脚本


编辑：

考虑到我在第一次回答时没有注意到的细节，下面是如何将样式应用于所讨论的
收音机的父
div
：

$(document).ready(function(){

    $('input:radio.highlight:checked').parent(".option").addClass("highlight");

    $('input:radio').change(function(){
        var $this = $(this);
            $this.closest('.accessOptions').find('div.highlight').removeClass('highlight');
         $this.closest('.option').addClass('highlight');
     });
 });

最简单的方法是简单地将类
highlight
添加到
div
中，该div包含默认选中的收音机。因为一旦选择了另一个无线电，JS就会删除该类，所以这应该可以正常工作。这是一把小提琴：


对任何人开放
仅限于允许的发件人
最简单的方法是简单地将类
高亮显示
添加到包含默认选择的收音机的
div
。因为一旦选择了另一个无线电，JS就会删除该类，所以这应该可以正常工作。这是一把小提琴：


对任何人开放
仅限于允许的发件人
+！最简单的解决办法天哪，我得到一个感叹号？这比投票要好得多@php_nub_qq+！最简单的解决办法天哪，我得到一个感叹号？这比投票要好得多@侧注：它应该是
而不是
侧注：它应该是
而不是