Javascript チェックボックスが未選択のままsubmitを押したら警告が出るようにする
チェックボックスがすべて空だったらsubmitさせたくない時。
まずJS。
function isCheck() {
var arr_checkBoxes = document.getElementsByClassName("checkBoxes");
var count = 0;
for (var i = 0; i < arr_checkBoxes.length; i++) {
if (arr_checkBoxes[i].checked) {
count++;
}
}
if (count > 0) {
return true;
} else {
window.alert("項目を1つ以上選択してください。");
return false;
}
}getElementsByClassNameはgetElementsByIdのclass版。
引数のクラス名の要素をまとめて配列で取得する。
チェックボックス要素.checkedで選択されてるかどうかの状態を示す。
選択されてたらtrue、されてなかったらfalseを返す。
trueの時、つまりチェックされてる時にcountに1ずつ足していく。
最後のif文で1つでも選択されてるか0かを見る。
0ならfalse。
ここで例えば
if (count >= 2)
とすると「2つ以上選択してください。」とかできる。
if (count === 0) {
return false;
} else if (count > 2) {
return false;
} else {
return true;
}で、「2つまで選択できます。(ただし未選択は不可)」もできる。
HTMLと合わせたらこうなる。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function isCheck() {
var arr_checkBoxes = document.getElementsByClassName("checkBoxes");
var count = 0;
for (var i = 0; i < arr_checkBoxes.length; i++) {
if (arr_checkBoxes[i].checked) {
count++;
}
}
if (count > 0) {
return true;
} else {
window.alert("項目を1つ以上選択してください。");
return false;
}
}
</script>
</head>
<body>
<form>
<input class="checkBoxes" type="checkbox">会社辞めたい</input><br>
<input class="checkBoxes" type="checkbox">すごく会社辞めたい</input><br>
<input class="checkBoxes" type="checkbox">会社辞めた</input><br>
<input type="submit" value="送信" onClick="return isCheck()" />
</form>
</body>
</html>onClickに注意。というのも、
onClick="return isCheck()"
と、必ずreturnを入れなければいけない。
入れないとfalseの時にクリックが無効にならない。
何も選ばなかったらこんな風に出てくる。
参考：
[JavaScript] チェックボックスのチェック状態を取得する
チェックボックスを扱う－JavaScript入門
