No.1ベストアンサー
- 回答日時:
<!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>
No.3
- 回答日時:
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>
No.2
- 回答日時:
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
checkboxにcheckedされない
-
チェックボタンの制御方法
-
チェックボックスが1つ以上チェ...
-
チェックボックスのON/OFFに応...
-
slickのレスポンシブ > center...
-
至急!GetElementById でtdの...
-
クリックされた罫表セルの行番...
-
フォームの値が0だったら空白...
-
return trueとreturn falseの用...
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
XMLHttpRequestを利用してPHPへ...
-
チェックボックスにチェックが...
-
FormのonsubmitでJavaスクリプ...
-
フィールドを有効(enabled?)に...
-
Javascriptの"return "について
-
objectのindex値って取れますか?
-
プルダウン4つ連動+α
-
CSVファイルを読みこみ、プルダ...
-
VBScriptでHTMLのセレクトボッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFに応...
-
checkboxをクリックしてリロー...
-
チェックボックスの設定
-
チェックボックスで指定したも...
-
スクリプト内でチェックボック...
-
確認ページからフォームページ...
-
複数のチェックボックス項目が...
-
クリアボタンの動作について
-
フォームのチェックボックスの...
-
チェックボックスとラジオボタ...
-
javascriptでチェックボックス...
-
チェックボックスで合計値を計...
-
チェックボックスを利用した表...
-
checkboxの文字連結の方法を教...
-
JSP内で可変するチェックボック...
-
JavaScriptからの戻り値
-
一つのチェックボックスのON/OF...
-
背景色を変えて未入力チェック...
おすすめ情報