• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

jQueryでチェックボックスやラジオボタンの状態を取得する

投稿者アイコン
2015/06/08
書いた人:
tanippa!
カテゴリ:
javascript   jQuery
108,092 views

jQueryでチェックボックスやラジオボタンの状態を取得しようとする時、attr関数では上手く取得することが出来ません。そこで今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。

jQueryでチェックボックスやラジオボタンの状態を取得する

jQueryでチェックボックスやラジオボタンの状態を取得しようとする時、最初は

$('#TargetID').attr('checked')

で取得しようとしたのですが、この取得方法には問題がありうまく状態を取得することが出来ませんでした。

そこで、今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。

取得方法

まず、結論として取得する方法を紹介します。

方法は下記の2通りです。

$('#TargetID').prop('checked')
$('#TargetID').is(':checked')

両方共、チェックされていればtrue、チェックされていなければfalseが返却されます。

個人的には後者の方が好みですが、どちらでも問題ありません。

また、checkedだけでなくselectedやdisabledといったプロパティに関しても、attrではなくpropやisを使った方法で取得しましょう。

実例

よくあるパターンとしては、フォームを送信する際、「同意する」チェックボックスにチェックが入っていない状況では送信ボタンが押せないようにするというものを例として挙げたいと思います。

HTML

<input id="AgreeBtn" type="checkbox">同意する<br>
<input id="SubmitBtn" type="submit" disabled>

JavaScript

$('#AgreeBtn').on('change', function(){
  if ($(this).is(':checked')) {
    $('#SubmitBtn').prop('disabled', false);
  } else {
    $('#SubmitBtn').prop('disabled', true);
  }
});

動作例

同意する

attrによる取得の問題点

これから先は正直知らなくてもあまり問題が無い内容なのですが、何故attrで状態を取得出来ないのか気になり調べてみたのでその内容を書いておきたいと思います。

$('#TargetID').attr('checked')

冒頭でも出したこのコードですが、一見普通に使えそうに見えますが、かなり問題があります。

というのも、checkedの取得にattrを使用した場合、返却値は「checked」か「undefined」になり、さらに対象がチェックされている状態でも状況によってはundefinedが返却されます。つまるところ全く使い物になりません。

これは

  • attrがDOMの属性を元に値を取得する点
  • checkboxにチェックを入れても、DOMの属性は変わらない点

この2点が理由です。

attrがDOMの属性を元に取得する

DOMの属性っていうのは例えば、

<a href="about.html"></a>

このaタグでいうとhrefが属性で、その値がabout.htmlですね。

では、今回問題になっているcheckboxの場合

<input type="checkbox" checked>

となるのですが、このHTMLは以下の内容と同じ意味を持ちます。

<input type="checkbox" checked="checked">

つまり、HTMLにcheckedを指定することは「checked属性にcheckedを指定」したのと同じ意味です。なのでattrでcheckedが帰ってくるわけですね。

逆にcheckedの指定がない場合は、そもそもchecked属性自体がDOMに存在していないのでundefinedが返却されることとなります。

checkboxにチェックを入れてもDOMの属性は変わらない

スクリーンショット 2015-05-14 13.55.30

この画像はチェックボックスにチェックを入れた時のDOMの状態を開発ツールで表示したものなのですが、見てわかる通りチェックボックスにチェックが入っているのにcheckboxのDOMにはchecked属性が追加されていません。

attrはDOMの属性を引っ張ってくるので、今回のパターンのようにDOMの状態が変わらないものに関してはattrでは状態を取得しようが無いということです。

以上

propやisなんて関数は自分も最初は存在自体を知らなかったのですが、今回のように無いと困ることもあるのでぜひ覚えておきましょう。

以上、たにっぱでした〜


この記事を読んだ人はこんな記事も読んでいます