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

Ads

関連記事

プログラミング

【簡単】ベーシック認証が設定されてるサイトのログパス解除URLを発行し、共有する方法

2022.02.01
14
WordPress プログラミング

wordpressのfeed取得先がEntity: line 2: parser で見れない時の対処方法

2021.10.27
31
JavaScript プログラミング

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

2020.07.15
776
WordPress プログラミング

【アドミンバー】WordPressで管理画面にログインしたらページ上部に余白ができるのを解決!

2022.04.14
73