<label>で囲まれた<input>のテキストの変更方法を教えてください。

下記のように<label>で囲まれた<input>のテキストを変更するには、どうすれば宜しいでしょうか？

例えば、"Option 1"を"hoge"にするには、どうすれば良いでしょうか？

html
1<div class="radio">
2  <label for="opt_1"><input type="radio" name="optradio" id="opt_1">Option 1</label>
3</div>

自分がやってみて、駄目だった例です。

javascript
1$("label[for='opt_1']").find("input").text("hoge");

行動規範の内容に同意します

回答3件

「Option 1」のテキストはinput要素の子ではなく、どちらもlabel要素の子として、input要素と同じ階層にあります。ですから、「input要素の$.text」と書いてもアクセスすることはできません。

$.contentsであれば、テキストも1つとしてカウントされますので、これを使うのが良いかと思います。

ただし、この場合テキストの部分は$.textではアクセスできません。$.textは「$のテキスト」へアクセスするためのものですが、今回は「テキストのテキスト」ではなく、テキスト自身が対象だからです。

JavaScript
1$("label").contents().last().replaceWith("hoge");

なので、新しいテキストでそっくり置き換えてしまう、という方法もアリかなと思います。

投稿2016/11/29 17:10

sii_side

総合スコア849

fjaiofjawiefjaw

2016/11/29 17:32

すみません。自身の実力不足で、現時点で回答の解説を100%理解できません。しかし、概略は理解出来たような気がします。サンプルで書いていただいたコードは、今後のために大変参考になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

labelで囲まれたinput内のテキストをspanタグとかで囲ってできるのではないでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <label for="text1">
10        <input name="text1" id="text1" type="text">
11        <span id="labelText">labelのテキスト</span>
12    </label>
13    <input type="button" class="button">
14</form>
15<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
16<script>
17    $('.button').click(function () {
18        $("#labelText").text("テスト");
19    })
20</script>
21</body>
22</html>

投稿2016/11/29 17:00

退会済みユーザー

総合スコア0

fjaiofjawiefjaw

2016/11/29 17:40

回答頂いた解決方法は、思いつきませんでした。どうもありがとうございます。

行動規範の内容に同意します

こんな感じとかどうでしょう。

JavaScript
1$(_=> {
2	let textNode = $( "label[for='opt_1']" )
3		.contents()
4		.filter( function() {
5			return this.nodeType === 3;
6		} );
7	textNode[ 0 ].nodeValue = 'hoge';
8	console.log( textNode );
9} );
10```**動くサンプル：**[https://jsfiddle.net/dLdwcb6g/](https://jsfiddle.net/dLdwcb6g/)
11
12---
13
14【.contents() | jQuery API Documentation】
15[https://api.jquery.com/contents/](https://api.jquery.com/contents/)
16
17【[jQuery]タグのnodeTypeで比較可能な値とその意味の一覧】
18[http://nanoappli.com/blog/archives/4649](http://nanoappli.com/blog/archives/4649)
19
20【JQueryでテキストノードの値を置き換える | IT-Gate】
21[http://blog.felt-life.info/it-gate/2013/09/22/jquery-replace-textnod/](http://blog.felt-life.info/it-gate/2013/09/22/jquery-replace-textnod/)
22
23【contents() サンプル - jQuery 日本語リファレンス】
24[http://semooh.jp/jquery/api/traversing/contents/_/src-1/](http://semooh.jp/jquery/api/traversing/contents/_/src-1/)