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>
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- JavaScript ソースコードは下の共有コードサイト「張り紙」にあります。 入力フォームの javascript で 1 2022/05/11 11:01
- その他(プログラミング・Web制作) プログラミング 処理速度 1 2022/11/25 11:05
- JavaScript Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい 5 2023/08/04 01:22
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- その他(プログラミング・Web制作) 変数宣言および代入について 4 2022/11/02 13:03
- その他(プログラミング・Web制作) .netに近いjsフレームワークは何ですか 2 2022/05/12 22:28
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Excel(エクセル) 表内で、Enterキーで横→行の最後入力したら次の行の先頭に移動するマクロを作りたい 3 2022/05/01 21:19
- JavaScript JavaScriptのif文について 3 2022/07/19 10:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFに応...
-
オフになっているチェックボッ...
-
フォームのチェックボックスの...
-
ラジオボタンとチェックボック...
-
チェックボックスを使って条件検索
-
チェックした数でメッセージを...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
-
submitボタンを表示することな...
-
クリックさせたいが、click()が...
-
子ウィンドウを閉じるとき、親...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
チェックボックスの設定
-
オフになっているチェックボッ...
-
スクリプト内でチェックボック...
-
背景色を変えて未入力チェック...
-
確認ページからフォームページ...
-
チェックが入っていなかったら...
-
JSP内で可変するチェックボック...
-
チェックボックスで指定したも...
-
チェックボックス可否条件記述...
-
checkboxをクリックしてリロー...
-
チェックボックスを使って条件検索
-
javascript checkbox
-
チェックボックスで選択したも...
-
チェックボックスに全てチェッ...
-
チェックボックスに連動するテ...
-
チェックボックスの値を変数に ...
-
一方のチェックボックスのON/OF...
-
チェックボックスの値を取り出...
おすすめ情報


