Q&A
以下のフォーム構成で30問のアンケートを行います。
lang
1<form action="form.html" method="post" name="hoge"> 2 <ul class="qustionwrap"> 3 <li> 4 <input type="radio" id="qustion01_1" name="qustion01" value="1"> 5 <label for="qustion01_1">YES</label> 6 </li> 7 <li> 8 <input type="radio" id="qustion01_2" name="qustion01" value="2"> 9 <label for="qustion01_2">NO</label> 10 </li> 11 <li> 12 <input type="radio" id="qustion01_3" name="qustion01" value="3"> 13 <label for="qustion01_3">どちらでもない</label> 14 </li> 15 </ul> 16 <ul class="qustionwrap"> 17 <li> 18 <input type="radio" id="qustion02_1" name="qustion02" value="1"> 19 <label for="qustion02_1">YES</label> 20 </li> 21 <li> 22 <input type="radio" id="qustion02_2" name="qustion02" value="2"> 23 <label for="qustion02_2">NO</label> 24 </li> 25 <li> 26 <input type="radio" id="qustion02_3" name="qustion02" value="3"> 27 <label for="qustion02_3">どちらでもない</label> 28 </li> 29 </ul> 30 <ul class="qustionwrap"> 31 <li> 32 <input type="radio" id="qustion03_1" name="qustion03" value="1"> 33 <label for="qustion03_1">YES</label> 34 </li> 35 <li> 36 <input type="radio" id="qustion03_2" name="qustion03" value="2"> 37 <label for="qustion03_2">NO</label> 38 </li> 39 <li> 40 <input type="radio" id="qustion03_3" name="qustion03" value="3"> 41 <label for="qustion03_3">どちらでもない</label> 42 </li> 43 </ul> 44 <ul class="qustionwrap"> 45 <li> 46 <input type="radio" id="qustion04_1" name="qustion04" value="1"> 47 <label for="qustion04_1">YES</label> 48 </li> 49 <li> 50 <input type="radio" id="qustion04_2" name="qustion04" value="2"> 51 <label for="qustion04_2">NO</label> 52 </li> 53 <li> 54 <input type="radio" id="qustion04_3" name="qustion04" value="3"> 55 <label for="qustion04_3">どちらでもない</label> 56 </li> 57 </ul> 58 <ul class="qustionwrap"> 59 <li> 60 <input type="radio" id="qustion05_1" name="qustion05" value="1"> 61 <label for="qustion05_1">YES</label> 62 </li> 63 <li> 64 <input type="radio" id="qustion05_2" name="qustion05" value="2"> 65 <label for="qustion05_2">NO</label> 66 </li> 67 <li> 68 <input type="radio" id="qustion05_3" name="qustion05" value="3"> 69 <label for="qustion05_3">どちらでもない</label> 70 </li> 71 </ul> 72 <ul class="qustionwrap"> 73 <li> 74 <input type="radio" id="qustion06_1" name="qustion06" value="1"> 75 <label for="qustion06_1">YES</label> 76 </li> 77 <li> 78 <input type="radio" id="qustion06_2" name="qustion06" value="2"> 79 <label for="qustion06_2">NO</label> 80 </li> 81 <li> 82 <input type="radio" id="qustion06_3" name="qustion06" value="3"> 83 <label for="qustion06_3">どちらでもない</label> 84 </li> 85 </ul> 86 <ul class="qustionwrap"> 87 <li> 88 <input type="radio" id="qustion07_1" name="qustion07" value="1"> 89 <label for="qustion07_1">YES</label> 90 </li> 91 <li> 92 <input type="radio" id="qustion07_2" name="qustion07" value="2"> 93 <label for="qustion07_2">NO</label> 94 </li> 95 <li> 96 <input type="radio" id="qustion07_3" name="qustion07" value="3"> 97 <label for="qustion07_3">どちらでもない</label> 98 </li> 99 </ul> 100 <ul class="qustionwrap"> 101 <li> 102 <input type="radio" id="qustion08_1" name="qustion08" value="1"> 103 <label for="qustion08_1">YES</label> 104 </li> 105 <li> 106 <input type="radio" id="qustion08_2" name="qustion08" value="2"> 107 <label for="qustion08_2">NO</label> 108 </li> 109 <li> 110 <input type="radio" id="qustion08_3" name="qustion08" value="3"> 111 <label for="qustion08_3">どちらでもない</label> 112 </li> 113 </ul> 114 <ul class="qustionwrap"> 115 <li> 116 <input type="radio" id="qustion09_1" name="qustion09" value="1"> 117 <label for="qustion09_1">YES</label> 118 </li> 119 <li> 120 <input type="radio" id="qustion09_2" name="qustion09" value="2"> 121 <label for="qustion09_2">NO</label> 122 </li> 123 <li> 124 <input type="radio" id="qustion09_3" name="qustion09" value="3"> 125 <label for="qustion09_3">どちらでもない</label> 126 </li> 127 </ul> 128 <ul class="qustionwrap"> 129 <li> 130 <input type="radio" id="qustion010_1" name="qustion010" value="1"> 131 <label for="qustion010_1">YES</label> 132 </li> 133 <li> 134 <input type="radio" id="qustion010_2" name="qustion010" value="2"> 135 <label for="qustion010_2">NO</label> 136 </li> 137 <li> 138 <input type="radio" id="qustion010_3" name="qustion010" value="3"> 139 <label for="qustion010_3">どちらでもない</label> 140 </li> 141 </ul> 142 ・ 143 ・ 144 ・ 145 ・ 146 <ul class="qustionwrap"> 147 <li> 148 <input type="radio" id="qustion030_1" name="qustion030" value="1"> 149 <label for="qustion030_1">YES</label> 150 </li> 151 <li> 152 <input type="radio" id="qustion030_2" name="qustion030" value="2"> 153 <label for="qustion030_2">NO</label> 154 </li> 155 <li> 156 <input type="radio" id="qustion030_3" name="qustion030" value="3"> 157 <label for="qustion030_3">どちらでもない</label> 158 </li> 159 </ul> 160</form> 161 162<div class="message"> 163<divclass="comment">あと●●問です。</div> 164<div class="bar"><p style="width:3.3333%;"></p></div> 165</div>
選択状況に応じて「message」エリアの「comment」内に残りの質問数を表示し、さらに「bar」にてステータスバーを表示したいです。
具体的には「bar」内のpタグを1問につき3.3333333%づつ横幅を足していき30問全部入力した時点で「width:99.999999%;」とするイメージです。
30問全部入力が完了したら「comment」の文言を「お疲れ様でした。チェック項目の入力が完了しました。最後に送付先情報を入力してください。」に切り替えて、5秒後秒後に「message」エリアを非表示にしたいです。
ご教授のほどよろしくお願いいたします。
回答1件
0
ベストアンサー
こんな感じでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title>フォームで残りの入力項目とステータスバーを表示</title> 7<script type="text/javascript" 8 src="https://code.jquery.com/jquery-1.11.3.js"></script> 9<script type="text/javascript"> 10 $(function() { 11 // 全質問取得 12 var questAll = $(".qustionwrap"); 13 // 回答取得 14 var ans = questAll.find("input:checked"); 15 // 残りの質問数を初期化 16 var last = questAll.length - ans.length; 17 // ステータスバーの幅を計算 18 var status = ans.length / questAll.length * 100; 19 // ステータスバー初期化 20 var statusBar = $(".bar p").css({ 21 width : status + "%" 22 }); 23 // 残りの質問数初期化 24 var commentSpan = $(".comment span").text(last); 25 26 // radioボタンの変更イベント 27 $("form input").on( 28 "change", 29 function() { 30 // 回答取得 31 ans = questAll.find("input:checked"); 32 // 残りの質問数 33 last = questAll.length - ans.length; 34 // ステータスバーの幅を計算 35 status = ans.length / questAll.length * 100; 36 // 入力完了チェック 37 if (last === 0) { 38 // 「comment」切り替え 39 $(".comment").text( 40 "お疲れ様でした。チェック項目の入力が完了しました。" 41 + "最後に送付先情報を入力してください。"); 42 //5秒後秒後に「message」エリアを非表示 43 setTimeout(function() { 44 $(".message").css({ 45 display : "none" 46 }); 47 }, 5000); 48 } else { 49 // 残りの質問数を表示 50 commentSpan.text(last); 51 } 52 // ステータスバー更新 53 statusBar.css({ 54 width : status + "%" 55 }); 56 57 }); 58 }); 59</script> 60<style type="text/css"> 61.bar { 62 width: 100%; 63 height: 1.5ex; 64 background-color: #001199; 65} 66 67.bar p { 68 height: 1.5ex; 69 background-color: #88BBFF; 70} 71</style> 72</head> 73<body> 74 <form action="form.html" method="post" name="hoge"> 75 <ul class="qustionwrap"> 76 <li><input type="radio" id="qustion01_1" name="qustion01" 77 value="1"> <label for="qustion01_1">YES</label></li> 78 <li><input type="radio" id="qustion01_2" name="qustion01" 79 value="2"> <label for="qustion01_2">NO</label></li> 80 <li><input type="radio" id="qustion01_3" name="qustion01" 81 value="3"> <label for="qustion01_3">どちらでもない</label></li> 82 </ul> 83 <ul class="qustionwrap"> 84 <li><input type="radio" id="qustion02_1" name="qustion02" 85 value="1"> <label for="qustion02_1">YES</label></li> 86 <li><input type="radio" id="qustion02_2" name="qustion02" 87 value="2"> <label for="qustion02_2">NO</label></li> 88 <li><input type="radio" id="qustion02_3" name="qustion02" 89 value="3"> <label for="qustion02_3">どちらでもない</label></li> 90 </ul> 91 <ul class="qustionwrap"> 92 <li><input type="radio" id="qustion03_1" name="qustion03" 93 value="1"> <label for="qustion03_1">YES</label></li> 94 <li><input type="radio" id="qustion03_2" name="qustion03" 95 value="2"> <label for="qustion03_2">NO</label></li> 96 <li><input type="radio" id="qustion03_3" name="qustion03" 97 value="3"> <label for="qustion03_3">どちらでもない</label></li> 98 </ul> 99 <ul class="qustionwrap"> 100 <li><input type="radio" id="qustion04_1" name="qustion04" 101 value="1"> <label for="qustion04_1">YES</label></li> 102 <li><input type="radio" id="qustion04_2" name="qustion04" 103 value="2"> <label for="qustion04_2">NO</label></li> 104 <li><input type="radio" id="qustion04_3" name="qustion04" 105 value="3"> <label for="qustion04_3">どちらでもない</label></li> 106 </ul> 107 <ul class="qustionwrap"> 108 <li><input type="radio" id="qustion05_1" name="qustion05" 109 value="1"> <label for="qustion05_1">YES</label></li> 110 <li><input type="radio" id="qustion05_2" name="qustion05" 111 value="2"> <label for="qustion05_2">NO</label></li> 112 <li><input type="radio" id="qustion05_3" name="qustion05" 113 value="3"> <label for="qustion05_3">どちらでもない</label></li> 114 </ul> 115 <ul class="qustionwrap"> 116 <li><input type="radio" id="qustion06_1" name="qustion06" 117 value="1"> <label for="qustion06_1">YES</label></li> 118 <li><input type="radio" id="qustion06_2" name="qustion06" 119 value="2"> <label for="qustion06_2">NO</label></li> 120 <li><input type="radio" id="qustion06_3" name="qustion06" 121 value="3"> <label for="qustion06_3">どちらでもない</label></li> 122 </ul> 123 <ul class="qustionwrap"> 124 <li><input type="radio" id="qustion07_1" name="qustion07" 125 value="1"> <label for="qustion07_1">YES</label></li> 126 <li><input type="radio" id="qustion07_2" name="qustion07" 127 value="2"> <label for="qustion07_2">NO</label></li> 128 <li><input type="radio" id="qustion07_3" name="qustion07" 129 value="3"> <label for="qustion07_3">どちらでもない</label></li> 130 </ul> 131 <ul class="qustionwrap"> 132 <li><input type="radio" id="qustion08_1" name="qustion08" 133 value="1"> <label for="qustion08_1">YES</label></li> 134 <li><input type="radio" id="qustion08_2" name="qustion08" 135 value="2"> <label for="qustion08_2">NO</label></li> 136 <li><input type="radio" id="qustion08_3" name="qustion08" 137 value="3"> <label for="qustion08_3">どちらでもない</label></li> 138 </ul> 139 <ul class="qustionwrap"> 140 <li><input type="radio" id="qustion09_1" name="qustion09" 141 value="1"> <label for="qustion09_1">YES</label></li> 142 <li><input type="radio" id="qustion09_2" name="qustion09" 143 value="2"> <label for="qustion09_2">NO</label></li> 144 <li><input type="radio" id="qustion09_3" name="qustion09" 145 value="3"> <label for="qustion09_3">どちらでもない</label></li> 146 </ul> 147 <ul class="qustionwrap"> 148 <li><input type="radio" id="qustion010_1" name="qustion010" 149 value="1"> <label for="qustion010_1">YES</label></li> 150 <li><input type="radio" id="qustion010_2" name="qustion010" 151 value="2"> <label for="qustion010_2">NO</label></li> 152 <li><input type="radio" id="qustion010_3" name="qustion010" 153 value="3"> <label for="qustion010_3">どちらでもない</label></li> 154 </ul> 155 <ul class="qustionwrap"> 156 <li><input type="radio" id="qustion030_1" name="qustion030" 157 value="1"> <label for="qustion030_1">YES</label></li> 158 <li><input type="radio" id="qustion030_2" name="qustion030" 159 value="2"> <label for="qustion030_2">NO</label></li> 160 <li><input type="radio" id="qustion030_3" name="qustion030" 161 value="3"> <label for="qustion030_3">どちらでもない</label></li> 162 </ul> 163 </form> 164 165 <div class="message"> 166 <div class="comment"> 167 あと<span>●●</span>問です。 168 </div> 169 <div class="bar"> 170 <p style="width: 3.3333333%;"></p> 171 </div> 172 </div> 173</body> 174</html>
コメント欄とステータスバー周りのスタイルシートにも若干手を加えています。
投稿2015/11/29 07:39
総合スコア354
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/29 12:44