UdemyjQueryで、チェックボックスを操作する動きをいくつかご紹介します。状態を取得チェックボックスの状態を取得する方法は3つあります。1.propこれが一般的によく使われる方法だと思います。CodePen.0こんな感じです。propは指定した属性の値を真偽値で取得できるものです。チェックが入っているかどうかを判定し、入っていたら、テキストを表示、入っていなかったら、テキストを空欄にする、という動作をさせています。複数マッチしている場合は、最初の要素のみ取得します。複数取得したい場合は、後述する、each()を使います。同じようなことができるものに、attr()ってのがありますが、これは使わない方が良いみたいです。attrはhtml属性を取得、propはjavascriptでの属性を取得します。attrだとcheckedという属性そのものを探しにいくので、checkedがない場合、「undifined」が返ってきます。返事をしてくれるんですね。input系の状態をjQueryで取得する際は、attrではなく、propを使うんだ、と覚えてしまいましょう。CodePen.0続いて、val()で取得する方法です。チェックが入っている項目の値を取得する方法です。実際には、チェックされている値を表示させたい場合などは、このやり方が向いていると思います。CodePen.0is()は要素集合の中に、一つでも条件が当てはまるものがあれば、trueを返すというものです。チェックボックスだけではなく、子要素の最初のものだったら、みたいな状態取得にも使えます。//以下省略みたいな感じでしょうか。以上、3つ紹介しましたが、普通に状態を取得するだけだったら、propを使うのが一番手軽でわかりやすいですね。選択したチェックボックスのvalue値を取得する方法です。CodePen.0$(this)って、jQueryでよく使いますが、チェックが入ったそのvalueをピンポイントで取得するってことですね。単一の値を取得する際はこれでOKです。複数の値を取得チェックボックスなので、複数の値を取得したいというケースも多々あると思います。CodePen.0複数の値を取得するには、each()を使います。前述した通り、propは最初の要素しか取得できません。jQueryのeach()は、ループ処理(繰り返し処理)をする際に使います。上記の例では、いずれかのチェックボックスにチェックが入ったら、チェックが入っているものをガサッと取ってきて、それを、each()で、一つ一つチェックが入っている値を取得し、配列に格納する、といった処理を行なっています。CodePen.0上記のように、使い道としては、例えば、別々の設問なんだけれども、ボタンを押したら、それに連動する設問にチェックを自動で入れるみたいな感じでしょうか。これまで見てきたチェックボックスの処理の発動をボタンクリックに変えているだけなので、それほど難しいものではないですね。全てにチェックチェックを入れる動作については、こっちの方が使うケースが多いかもです。CodePen.0結構簡単ですね。nameで指定しているので、それに当てはまる要素に全てチェックを入れたり、外したり、ということです。チェックできる数を制限するこれもよく使いますね。投票フォームみたいなのを作った際、10名のうち2名まで投票可能みたいシステム。CodePen.0チェックする数を数えて、数が満たされれば、disabled要素をつけるという内容。not()は、指定しているものがないものを取得するためのもの。上記のコードでは、checkedがないものを取得してます。disabledをつけたり外したりをしてます。チェックボックスを追加こちらは選択肢を動的に増やしていくもの。タスク管理的なwebサービスを作る時とか、こういうのは重宝されますね。CodePen.0要素を追加するappend()を使ってあげれば良いですね。webサービスとかだと、実際には、追加した要素をデータベースに保存させるような仕組みが必要になるとは思いますが。jQueryの要素追加メソッドはこちらの記事に詳しくまとめてますので、ぜひ参考にしてください。要素の追加メソッドまとめ」ちなみに、このように動的に要素を追加した場合、今まで紹介したようなコードではうまく動作しません。jQueryをそこそこ使っている方はお分かりだと思いますが、on()を使う必要がありますね。CodePen.0こんな感じでうまくいきます。以上、チェックボックスに絡んだjQueryのサンプルコードでした。最近の投稿PHPの四捨五入、切り捨て、切り上げ。