Question

我正在迭代前一个邻居的单选按钮。我的HTML看起来像这样：

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>

我正在尝试将类red添加到检查其邻居单选按钮的span。这是我尝试的方式：

$('.holder span').each(function(){
                var spanElement = $(this);
                if(spanElement.nextAll(':radio:first').is(':checked')){
                    spanElement.addClass("red");
                }
            });

我总是以最后一个跨度（第三个持有者div中的那个）获得类red。但正如你可以看到中间的一个被检查。当我在第一个跨度

上设置checked=checked时，会发生同样的事情

更新

也试过：

$('.holder span').each(function(){
                if($(this).next().attr("checked") == "checked"){
                    $(this).addClass("red");
                }
            });

同样的结果，不知道还有什么可以尝试。

更新II ：

Html使用从服务器端生成的先前信息进行渲染，因此一旦创建了html，就只能有一个checked=checked无线电输入元素。

我正在通过文档就绪函数执行此迭代。

Answer 1

尝试此更改：

$('.holder span').each(function(){
                var spanElement = $(this);
                if(spanElement.next('input[type=radio]').is(':checked')){
                    spanElement.addClass("red");
                }
            });

Answer 2

您可以选择已检查的输入并将类添加到其兄弟范围元素中。

$('.holder input[type=radio]:checked').prev('span').addClass('red')

http://jsfiddle.net/TdR7k/

如果您想在change事件中添加和删除类，可以尝试以下操作：

$('.holder input[type=radio]').change(function() {
     $('.red').removeClass('red');
     $(this).prev('span').addClass('red')
}).change()

http://jsfiddle.net/dSv6P/

Answer 3

问题在于您定义单选按钮的方式，不在html中包含checked属性，或者默认情况下会检查它们例如：http://jsfiddle.net/TdR7k/1/

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiy" value="primary" checked="" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiliy" value="primary" checked  />
</div>

检查所有三个

单选按钮的正确定义是

<input type="radio" name="(Group)" value="(etc)"  />

默认情况下检查它，只需要：

<input type="radio" name="(Group)" value="(etc)" checked />

你添加了同一组的三个单选按钮，这些按钮默认都被选中，所以最后一个按钮覆盖前两个并获得红色类

但主要是针对实际答案，不要将check作为属性包括在内并将javascript应用为onclicked事件，或者仅将checked添加到单个元素中这是一个onclick事件的示例： http://jsfiddle.net/7kbLf/2/

Answer 4

如果单选按钮包含checked属性。然后默认选中 ..

<input type="radio" name="group1" value="hello" checked>  // Checked by default.

因此删除其他两个RadioButton的checked属性..如果由于语法不这样做，默认情况下会选中带有已检查属性的最后一项。

<div class="holder"> 
    <span>some text</span> 
    <input type="radio" name="test_capability" value="primary" /> 
</div>
<div class="holder">
   <span>some text</span>
   <input type="radio" name="test_capability" value="primary" checked="checked"/> 
</div>
<div class="holder"> 
    <span>some text</span> 
    <input type="radio" name="test_capability" value="primary" />
 </div>

如果您以这种方式设置HTML，您的方法应该有效..

$('.holder span').each(function() {
    var spanElement = $(this);
    if (spanElement.nextAll(':radio:first').is(':checked')) {
        spanElement.addClass("red");
    }
});

// Change event 
$('input[type="radio"]').on('change', function() {
    $('span').removeClass('red');

    if( this.checked){
        $(this).closest('div.holder').find('span').addClass('red');
    }
});

<强> CHECK FIDDLE

对单选按钮的困惑

4 个答案: