Written by Kasumi

jQueryを使って、checkしたinput要素の label値を取得する方法

input要素のcheckbox(チェックボックス)で、クリックしたcheckbox要素のlabel値をjQueryを使って動的に出力したい。

input要素のvalue値は取得できるが、label値の取得方法がわからない。

このような悩みを解決致します。

本記事では、jQueryを使って、クリック(チェック)したinput要素のlabel値を取得する方法について解説します。

サンプルコード

$("input:checkbox").click(function () {
  var id = $(this).attr('id');
  var label = $('label[for="' + id + '"]').text();
  console.log(label);
});

上記jQueryでlabel値を取得するサンプルコードになります。

まず、click()関数を使ってinput要素をクリックしたらというコードを定義しましょう。

次にclick()関数内でattr()関数を使い、クリックしたinput要素のIDを取得し、変数に入れます。

最後に上記IDが入った変数を$(‘label[for=”‘ + id + ‘”]’)セレクタ内に代入し、text()関数で値を取得すればOK。

以上で取得完了です。

まとめ

input要素のvalue値を取得するだけなら、val()関数のみで取得できますが、label値を取得するとなるともうひと手間かかります。

簡単ではあるので、本記事を参考にlabel値を取得してみてください。

目次

関連記事

HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1071
jQuery

jQueryを使ってdivタグ、pタグ等のテキスト値を取得する方法

更新日:2022.09.09
2857
jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

更新日:2022.09.09
3825
jQuery

【簡単】ajaxを使って別ページにある一部分のhtmlコードを取得し、読み込む方法【jQuery】

更新日:2022.09.09
4675