全てのチェックボックスをクリックしたらボタンが押せるようになり、次のページへ移動という流れを構築したいです。
Q&A
Closed
解決したいこと
全てのチェックボックスをクリックしたらボタンが押せるようになり、次のページへ移動という流れを構築したいです。
HTMLに初挑戦しており、上記のコードを書きたいと考えておりますが、ボタンが押せるようになってから次のページへ移動というポイントで躓いております。解決へ向け6種類ほど試してみましたが、
①「チェックボックスを全てクリックしたら」という条件は適えているものの、ボタン操作がページのトップへ移動
②チェックボックスを全てクリックせずともボタンを押せば次のページへ移動
いずれかしか出来ず、目的の達成までに至りません。
発生している問題・エラー
①「チェックボックスを全てクリックしたら」という条件は適えているものの、ボタン操作がページのトップへ移動
②チェックボックスを全てクリックせずともボタンを押せば次のページへ移動
いずれかしかできない
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
h1 {
font-size: 30px;
background-color: #00af3a;
color: #ffffff;
padding: 8px 14px;
}
ol {
border: 2px solid #F3F3F3;
padding: 14px 14px 14px 32px;
}
</style>
<body>
<h1>XXX</h1>
<p>XXX</p>
<ol>
<form>
<li>XXX</li>
<label>
<input type="checkbox" name="terms" value="accept" required >
チェック
</label>
<br><br><br>
<li>XXX</li>
<label>
<input type="checkbox" name="terms" value="accept" required >
チェック
</label>
<br><br><br>
<li>XXX</li>
<label>
<input type="checkbox" name="terms" value="accept" required >
チェック
</label>
<br><br><br>
<li>XXX</li>
<label>
<input type="checkbox" name="terms" value="accept" required >
チェック
</label>
<br><br><br>
<button>次へ</button><br>
※内容を確認してチェックボックスをクリックしてください。
</form>
</ol>
</body>
</html>
よろしくお願い致します。
0
