0

嗨，我有以下

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=1 CHECKED type=radio>&nbsp;Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=2 CHECKED type=radio>&nbsp;Option2
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=3 CHECKED type=radio>&nbsp;Option3
</label>

我想重命名选项 x 以根据某些事件测试 x。

var radioOpt = $("input[name=radioOpt][value=1]");

会给我单选按钮。我将如何重命名它的标签？

4

5 回答 5

1

尝试如下，

$(function () {
    $("input[name=radioOpt]").parent().contents().each(function () {
        if (this.nodeType == 3 && this.nodeValue.indexOf('Option') != -1) {
            this.nodeValue = 'Test';
        }
    });
});

演示：http: //jsfiddle.net/skram/Cgv2f/2/

于 2012-06-21T18:02:26.670 回答
1

如果您不想更改标记，您可以执行以下操作来更改这种情况下的文本

$(function(){
     $("input[name=radioOpt][value=1]")
      .parent()
      .contents()
      .last()[0].nodeValue = 'Test 1';
});

演示 http://jsfiddle.net/joycse06/U7TMs/

于 2012-06-21T18:06:53.607 回答
0

我建议如下：

var labelForOpt = radioOpt.parent();

但是label，出于可访问性的原因，应该有for属性来指定input它“属于”哪个，例如：

<label for="radioElement1">For radio One:</label>
<input id="radioElement1" />

这意味着您不必将 嵌套input在 中label，单击label将触发对关联的input.

还值得指出的是您的 HTML 无效：

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt value=1 CHECKED type=radio>&nbsp;Option1
</label>

元素)的 HTML 中不应该有浮动。input

于 2012-06-21T17:57:00.837 回答
0 
radioOpt.closest("label");

这将为您提供最接近的label元素，它是所选元素的祖先（或元素本身，但事实并非如此）。然后，您可以使用.html(function)或通过迭代替换文本.contents()，过滤文本节点（where ）并替换值。this.nodeType=== 3

与您的实际问题无关，但我想通知您，您的 HTML 中有很多标记错误。)属性后面不应该有一个class，您不能检查多个具有相同名称的单选按钮，并且当您可以使用类来使用 CSS 设置样式时，使用内联样式是一个坏主意。

<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="1" checked/> Option1
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="2"/> Option2
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="3"/> Option3
</label>

然后，将样式放入 CSS 样式表中：

input.fieldValue {
    display: inline;
    vertical-align: middle;
}
于 2012-06-21T17:57:13.413 回答
0

试试这个 ：

HTML：

    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=1 CHECKED type=radio id="op1"><label for = "op1">Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class="fieldValue" name="radioOpt" id="op2"   value="2" CHECKED type="radio"><label for = "op2">Option2
</label>
<label>
    <INPUT id="op3" style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=3 CHECKED type=radio><label for = "op3" >Option3

</label>​

jQuery：

$("input[name=radioOpt]").click(function(){
    var id = $(this).attr('id');
    $('label[for='+id+']').text('test_'+$(this).attr('value'));
});
​

这是演示

于 2012-06-21T18:15:17.623 回答