JavaScriptやjQueryを使用すると
フォームで入力された文字や選択された項目を取得することができます。
基本こちらのHTMLを使用する前提で行っていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="./script.js"></script>
<title>jQuery Checkbox Practice</title>
</head>
<body>
<form>
<h1>果物を選んでね</h1>
<div>
<span>好きなだけ選べるよ</span>
</div>
<label>
<input type="checkbox" value="シナノスイート">
りんご
</label>
<label>
<input type="checkbox" value="アボガド">
バナナ
</label>
<label>
<input type="checkbox" value="ホワイトグレープフルーツ">
みかん
</label>
<div>
<input type="submit" value="送信">
</div>
</form>
</body>
</html>
submit
submitイベントは、フォームが送信される時に呼び出されるイベントです。
$(function() {
$("form").on("submit", function() {
console.log("送信ボタンが押されました");
});
});
コンソールに「送信ボタンが押されました」と表示されるはずですが、
すぐにコンソールから消えてしまいます。
理由は、formタグのsubmitボタンが押され、ページが新しく更新されるからです。
formタグのaction属性を指定していないので、同一ページにリダイレクトされています。
preventDefault()
preventDefault() は、ブラウザが最初から持っているアクションをキャンセルするメソッドです。
$(function() {
$('form').on('submit', function(e) {
console.log('送信ボタンが押されました');
e.preventDefault();
});
});
2行目の関数の引数にeと追記しました。
イベント内の関数の第一引数に自動でイベントオブジェクトが渡されます。イベントオブジェクトには、イベントの発生元の要素や押されたキーの情報などが入っています。
ここで取得したイベントオブジェクトに対して、preventDefault()を使用することで要素のイベントをキャンセルすることができます。
イベントオブジェクト
イベントオブジェクトとは、イベントに関する情報を持つオブジェクトです。
targetやkeyCodeなどのプロパティを使うことで
イベントの発生元の要素や押されたキーの種類などを知ることができます。
コンソールで確認することはできます。
find("セレクタ")
Rubyで使用するfind()メソッドと用途は同じです。
しかし、1点大きな違いとして、Rubyのfind()メソッドは最初に該当する1つだけしか取得ができませんでしたが、
jQueryのfind()メソッドは、引数にセレクタを指定して、合致するセレクタを全て取得します。
セレクタの属性は、[]を使用します。
$(function() {
$('form').on('submit', function(e) {
let checkboxes = $(this).find('input[type="checkbox"]');
e.preventDefault();
alert('あなたが選んだ果物:\n' + checkboxes);
});
});
each()
引数に要素番号を指定することが可能です。
prop()
prop() は、要素のプロパティを取得するメソッドです。
attr()
prop()と似ていますが、attr()は要素の値（バリュー）を取得することができます。
総まとめ
$(function() {
$('form').on('submit', function(e) {
let output = ''; //出力する値を文字列の変数（output）で定義しています。
let checkboxes = $(this).find('input[type="checkbox"]'); //チェックボックスを取得して変数checkboxesに代入しています。
checkboxes.each(function(i, checkbox) { //each文を使い、checkboxesの中の要素を取り出します。
checkbox = $(checkboxes[i]);
if (checkbox.prop('checked')) {
output += checkbox.attr('value') + '\n';
}
});
e.preventDefault();
alert('あなたが選んだ果物:\n' + output); //outputをalertで出力すれば、選択された果物を出すことができます。
});
});
重要な箇所を重点的に解説します。
・7行目
prop()を使って取り出した要素がチェックされているかどうかを確認します。7行目のif文において、要素がチェックされている場合はtrueが返り値になります。trueの場合、チェックされている要素の値だけを3行目で文字列の変数として定義しておいたoutputに+=を使って追加代入することができます。