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