GHWEB06.GRASSHOPPER

jQueryで簡易診断の作成

  • Category:Web関連
  • Web関連の備忘録

sindanjQueryで簡易な診断ができるページを作成してみました。サンプルでは診断ボタンを押すと結果の文字列を表示するだけですが、該当ページに飛ばしても良いかもしれません。

スクリプトとサンプル

$(function(){   
var message = $('#message');
message.text('結果は、ここに表示されます');
$('#show').click(function(){
var mycheck = $('form input:checked').length;
if(mycheck == 0) {
mess ="0%";
} else if(mycheck <= 1) {
mess ="20%";
} else if(mycheck <= 2) {
mess ="40%";
} else if(mycheck <= 3) {
mess ="60%";
} else if(mycheck <= 4 ) {
mess ="80%";
} else {
mess ="100%";
}
message.text(''+mess+'です。');
});

$('#reset').click(function(){
message.text('結果は、ここに表示されます');
});
});

サンプル

スクリプトの処理内容

$(function(){	

/* id #message を 変数 message に格納 */	   
var message = $('#message');

/* message に指定テキストを表示 */	
message.text('結果は、ここに表示されます');

/* 診断ボタンを押した時の処理 */
$('#show').click(function(){

/*
:checked を使ってチェックの入っている
チェックボックスの数を取得
*/
var mycheck = $('form input:checked').length;

/*
ifを使用して取得したチェックボックスの数で
変数messに格納する文字列を指定
*/
if(mycheck == 0) {
mess ="0%";
} else if(mycheck <= 1) {
mess ="20%";
} else if(mycheck <= 2) {
mess ="40%";
} else if(mycheck <= 3) {
mess ="60%";
} else if(mycheck <= 4 ) {
mess ="80%";
} else {
mess ="100%";
}

/* message に指定テキストを表示 */	
message.text(''+mess+'です。');
});

/* リセットボタンを押した時の処理 */
$('#reset').click(function(){

/* message に指定テキストを表示 */	
message.text('結果は、ここに表示されます');
});

});
  • 掲載: