詳しい人求む！

JAVASCRIPT

解決済

質問者：あっきー126
質問日時：2022/01/26 09:22
回答数：3件

複数のチェックボックスでどこにもチェックがはいっていない場合にエラーを流すJAVASCRIPTのやり方を教えてください。

通報する

この質問は特に40代・男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naktak
回答日時：2022/01/26 09:38

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8" />
<script>
function validate() {
var checkedItemElements = document.querySelectorAll('.item:checked');
if (checkedItemElements.length == 0) {
alert('1つもチェックされていない');
}
}
</script>
</head>
<body>
<input type="checkbox" class="item" value="1">
<input type="checkbox" class="item" value="2">
<input type="checkbox" class="item" value="3">
<input type="checkbox" class="item" value="4">
<button onclick="validate()">Validate</button>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： yambejp
回答日時：2022/01/26 10:55

toggleAttributeした方がみやすいかも

<form>
<input type="text" name="hoge" value="123">
<input type="checkbox" name="a[]" value="1">
<input type="checkbox" name="a[]" value="2">
<input type="checkbox" name="a[]" value="3">
<input type="checkbox" name="a[]" value="4">
<input type="submit" value="send">
</form>
<script>
const toggleRequired=()=>{
const flg=document.querySelectorAll('[type=checkbox]:checked').length==0;
document.querySelectorAll('[type=checkbox]').forEach(x=>x.toggleAttribute("required",flg));
}
toggleRequired();
document.addEventListener('change',toggleRequired);
document.querySelector('[type=checkbox]:required').addEventListener('invalid',()=>alert('err'));
</script>

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2022/01/26 10:52

<form>

<input type="text" name="hoge" value="123">
<input type="checkbox" name="a[]" value="1">
<input type="checkbox" name="a[]" value="2">
<input type="checkbox" name="a[]" value="3">
<input type="checkbox" name="a[]" value="4">
<input type="submit" value="send">
</form>
<script>
const toggleRequired=()=>{
if(document.querySelectorAll('[type=checkbox]:checked').length==0){
document.querySelectorAll('[type=checkbox]').forEach(x=>x.setAttribute("required",""));
}else{
document.querySelectorAll('[type=checkbox]').forEach(x=>x.removeAttribute("required"));
}
}
toggleRequired();
document.addEventListener('change',toggleRequired);
document.querySelector('[type=checkbox]:required').addEventListener('invalid',()=>alert('err'));
</script>