Question

我在检查单选按钮的样式时遇到了一些问题，我的代码通常有效，除非有一个DEFAULT检查单选按钮，然后样式不再有效，直到我检查一个不同的单选按钮。我的问题是如何在默认情况下选中相同的样式应用于单选按钮，是否可以仅使用CSS？

这是我的代码：

HTML

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

CSS：

.highlight {
     background: #5479ab;
 }

jquery的：

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

链接到jsfiddle： http://jsfiddle.net/priswiz/BMB9R/

Answer 1

您可以使用CSS3的:checked选择器。

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

无需编写脚本。

修改

鉴于我在第一次回答中没有抓到的详细信息，以下是如何将样式应用于相关div的父radio：

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

Answer 2

最简单的方法是将类highlight添加到包含默认选中的广播的div。由于你的JS在选择了另一个无线电后删除了这个类，这应该可以正常工作。这是一个小提琴：http://jsfiddle.net/w4UDz/1/

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

Answer 3

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

所以请在您的代码中添加.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而不是input这样

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

至少这是你的代码所做的..

检查单选按钮样式

3 个答案: