jQueryで複数のチェックボックス値を取得する方法
この記事では、jQueryで複数のチェックボックスの値を取得する方法について見ていきます。ここでは、選択されたチェックボックスの値をjQueryを使って取得する方法を学びます。
チェックボックスやラジオボタンには、:checked セレクタを使用します。これによって、チェックボックスの選択された値を取得できます。
チェックボックスをクリックすると、push() 関数を使って配列に値を追加していきます。
それでは、jQueryで選択されたチェックボックスの値を取得する方法、JavaScriptで複数のチェック済みチェックボックスの値を取得する方法、そして配列を使ってjQueryで複数のチェックボックスの値を取得する方法を見ていきましょう。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQueryで複数のチェックボックスの値を取得する方法</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<form>
<h3>言語を選択:</h3>
<label><input type="checkbox" value="laravel" name="language"> Laravel </label>
<label><input type="checkbox" value="php" name="language"> PHP </label>
<label><input type="checkbox" value="jquery" name="language"> jQuery </label>
<label><input type="checkbox" value="javascript" name="language"> JavaScript </label>
<label><input type="checkbox" value="react" name="language"> React </label>
<label><input type="checkbox" value="angular" name="language"> Angular </label>
<label><input type="checkbox" value="python" name="language"> Python </label>
<br>
<button type="button">選択された値を取得</button>
</form>
<script>
$(document).ready(function() {
$("button").click(function(){
var arr = [];
$.each($("input[name='language']:checked"), function(){
arr.push($(this).val());
});
alert("選択した言語は次の通りです: " + arr.join(", "));
});
});
</script>
</body>
</html>
フルスクリーンモードを終了する
出力:
