2

我正在迭代以前的邻居单选按钮。我的 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以跨越其邻居单选按钮被选中。这是我尝试的方法：

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

我总是以最后一个跨度（第三个持有人 div 中的一个）结束 class red。但正如你所看到的，中间的被选中了。checked=checked当我设置第一个跨度时也会发生同样的事情

更新

也试过：

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

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

更新二：

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

我正在文档就绪功能中进行此迭代槽跨度。

4

4 回答 4

1

试试这个改变：

$('.holder span').each(function(){
                var spanElement = $(this);
                if(spanElement.next('input[type=radio]').is(':checked')){
                    spanElement.addClass("red");
                }
            });
于 2012-10-26T03:21:29.900 回答
1

您可以选择选中的输入并将类添加到它的兄弟 span 元素。

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

http://jsfiddle.net/TdR7k/

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

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

http://jsfiddle.net/dSv6P/

于 2012-10-26T03:23:10.930 回答
0

问题是您定义单选按钮的方式，不要在 html 中包含选中的属性，否则默认情况下会检查它们：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 />

您正在添加默认情况下都选中的同一组的三个单选按钮，因此最后一个会覆盖前两个并获得红色类

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

于 2012-10-26T03:46:54.277 回答
0

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

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

因此，删除其他两个 RadioButtons 的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');
    }
});

检查小提琴

于 2012-10-26T04:17:13.937 回答