0

我有这样的html：

<form>
    <div class="row">
        <input type="radio" class="radio">
        <label>Text</label>
        <input type="radio" class="radio">
        <label>Type</label>
    </div>
</form>

现在我需要在每个<input type="radio">.

我正在使用这样的jquery：

if($('input').hasClass('radio')){
    $(this).next().addClass('radio-url');
}

我正在尝试<label>在无线电标记之后立即向每个添加类 'radio-url'。我在这方面犯了什么错误？

4

9 回答 9

3

您可以使用.siblings()

$('input[type="radio"]').siblings('label').addClass('radio-url');

演示

或者

$('input[type="radio"]').next('label').addClass('radio-url');

演示2

于 2013-10-29T15:26:06.620 回答
1

这个答案不能直接回答你的问题！

我相信您的标签应该具有for属性，以便标签与单选按钮相关联。这允许用户：

  1. 通过单击标签来检查单选按钮！
  2. 如果输入类型是文本，点击标签聚焦文本输入
  3. 出于可访问性的原因

HTML

<div class="row">
    <input type="radio" class="radio" id="text"></input>
    <label for="text">Text</label>
    <input type="radio" class="radio" id="type"></input>
    <label for="type">Type</label>
</div>

jQuery

使用单选元素的 ID 搜索标签。

$('input[type="radio"]').each(function(){
    var radioId = $(this).attr("id");
    $("label[for='" + radioId + "']").addClass('radio-url');
});

小提琴：http: //jsfiddle.net/78zAB/

于 2013-10-29T15:47:01.497 回答
1

尝试：

$(':radio').next().addClass('radio-url');

jsFiddle 示例（我在其中输入了一个文本输入，因此您可以看到它仅适用于无线电输入）

于 2013-10-29T15:26:23.277 回答
1

您可以使用 next() 函数

 $("input:radio").next('label').addClass("radio-url");`
于 2013-10-29T15:28:12.503 回答
0

效果最佳

$('input[type=radio]').next('label').addClass('radio-url');

http://jsfiddle.net/q76FJ/

于 2013-10-29T15:32:03.837 回答
0

您需要遍历所有单选按钮：

$('input[type="radio"]').each(function(){
    $(this).next().addClass('radio-url');
});

或者

$("input[type='radio'] + label").addClass('radio-url')

小提琴示例

示例 2

于 2013-10-29T15:26:45.607 回答
0

演示

$('input.radio').each(function () {
    $(this).next().addClass('radio-url');
})
于 2013-10-29T15:31:11.977 回答
0

使用 CSS 元素+元素选择器：

$('input:radio + label').addClass('theClass')

http://jsfiddle.net/ttnUU/

于 2013-10-29T15:31:29.733 回答
0

将此作为答案发布，因为所有其他人都使用了不正确的选择器，或者不指定labelin next()： 

$('input.radio').next('label').addClass('radio-url');

..这会将类添加到紧跟在类之后的radio-url所有label元素中inputradio

于 2013-10-29T15:38:52.147 回答