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値を取得してみてください。

目次

関連記事

jQuery

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
1406
jQuery

jQueryを使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

更新日:2022.09.09
3402
jQuery

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

更新日:2022.09.09
1677
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
823