複数のcheckboxにチェックが入っているか確認する方法
自分が仕事をしていた時にちょっと詰まったところ。
やりたいことは
フォーム送信前に複数あるcheckboxに一つ以上チェックされているか確認
↓
一つ以上チェックが入っていればpost送信、入っていなければエラーとしalertで警告して送信しない
↓
一つ以上チェックが入っていればpost送信、入っていなければエラーとしalertで警告して送信しない
というもの。
checkboxのサンプルhtml
<form name="form1"> <div>ITエンジニアってどうですか？(必須)</div> <div> <input type="checkbox" name="ckbox[]" value="1">最高<br> <input type="checkbox" name="ckbox[]" value="2">まあまあ<br> <input type="checkbox" name="ckbox[]" value="3">最悪<br> <input type="checkbox" name="ckbox[]" value="4">止めたほうが良い<br> <input type="checkbox" name="ckbox[]" value="5">もうだめだ<br> </div> <button onclick="ck()">送信</button> </form>
Javascript(jQuery)はこちら
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function ck(){
var err = '';
var ckflg = 0;
$('input[name="ckbox[]"]:checked').each(function(index, value){
ckflg++;
});
if(ckflg==0){
err += "チェックボックスは最低1つチェックして下さい\n";
}
if(err==''){
if(confirm("この内容で送信します")){
elm = document.form1;
elm.target = "_self";
elm.action = "test.php";
elm.submit();
}
}else{
alert(err);
return false;
}
}
</script>
送信先では
<?php
foreacn($_POST['ckbox'] as $v){
echo $v.'<br>';
}
?>
foreachなどで送信されたcheckbox配列の値を取得できます。
ポイント
チェックボックスのnameは配列型
<input type="checkbox" name="ckbox[]" value="1">最高<br>
チェックボックスのnameにckbox[](配列)を使用。配列型にすると追加があった時に楽ちんです。
Jqueryのeachを使ってチェックボックスの値を確認
jQueryのeachを使用します。
$('input[name="ckbox[]"]:checked').each(function(index, value){
ckflg++;
});
上記はnameがckbox[]のフォームにチェック(:checked)されているものがあったら、その配列番号(index)と値(value)を取得する処理となります。
チェックされている場合だけ処理が動くので、その時はフラグ変数(ckflg)に++で加算。
ckflgが0ならチェックされていないということでエラー処理に入ります。
また今回はチェックの有無のみの確認なので
$('input[name="ckbox[]"]:checked').each(function(){
としてもOKです。
jQuery・each構文の解説ドキュメントはこちら。
ちなみに自分が詰まったところは
$('input[name="ckbox[]"]:checked')
の書き方。”と’の位置を間違えてエラーを出してました。
サンプルプログラム全文
古臭い書き方で書いています。
<html lan="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function ck(){
var err = '';
var ckflg = 0;
$('input[name="ckbox[]"]:checked').each(function(index, value){
ckflg++;
});
if(ckflg==0){
err += "チェックボックスは最低1つチェックして下さい\n";
}
if(err==''){
if(confirm("この内容で送信します")){
elm = document.form1;
elm.target = "_self";
elm.action = "test.php";
elm.submit();
}
alert(err);
return false;
}
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="ckbox[]" value='1'>最高<br>
<input type="checkbox" name="ckbox[]" value='2'>まあまあ<br>
<input type="checkbox" name="ckbox[]" value='3'>最悪<br>
<input type="checkbox" name="ckbox[]" value='4'>止めたほうが良い<br>
<input type="checkbox" name="ckbox[]" value='5'>もうだめだ<br>
<button id="ckbutton" onclick="ck()">送信</button>
</form>
</body>
</html>
コメント