以下の記事で紹介されているコードを、HTML内に組み込めるようにjavascriptに変換したいのですが、うまくいかずに困っています。
jQueryでかんたん作成!診断テストの作り方
どなたかお力添えいただけないでしょうか。
宜しくお願いいたします。
HTML <ul> <li> Q1. 問題が入ります <label><input type="radio" name="q01" class="typeA"> YES</label> <label><input type="radio" name="q01" class="typeB"> NO</label> </li> //以下省略 </ul> <button>診断する</button> <div class="result resultA"> あなたはAタイプ </div> <div class="result resultB"> あなたはBタイプ </div>
$(function(){ //ボタンがクリックされた時 $("button").cllick(function(){ //一度結果を非表示にする $(".result").hide(); //問題数を取得 var qNum = $("ul li").length; if( $("ul li input:checked").length < qNum ){ //全てチェックしていなかったらアラートを出す alert("未回答の問題があります"); } else { //チェックされているinputの数を取得 var typeANum = $(".typeA:checked").length, typeBNum = $(".typeB:checked").length; if( typeANum > typeBNum ) { //もしもAの方が多かったらAタイプを表示 $(".resultA").fadeIn(); } else if( typeANum < typeBNum ) { //もしもBの方が多かったらBタイプを表示 $(".resultB").fadeIn(); } } }); });
回答1件
あなたの回答
tips
プレビュー