実行例

あなたの危険度チェック！

使い方

● チェックボックスの診断文を作っていきます。

<input type="checkbox">たばこは１日２０本以上吸う<br>

<input type="checkbox">お酒を飲むと性格が変わる<br>

<input type="checkbox">車を運転すると性格が変わる<br>

<input type="checkbox">刃物を手にすると心がなごむ<br>

<input type="checkbox">ピストルを所持している<br>

● if 文でチェック数の範囲での結果を作っていきます

if ( myCnt == 0 ) myMess = "正常";	// チェックは　無し(ゼロ)
else if ( myCnt <= 2 ) myMess = "ちょヤバ";	// チェックは１以上２以下
else if ( myCnt <= 4 ) myMess = "危険気味";	// チェックは３以上４以下
else myMess = "完璧に危険";	// チェックは全部(５)

この if 文の条件式で「ん？」と思ったら、Step.68 を参照してください。

説明

「××度チェック」をやろうと思えば、チェックボックスとボタンが想像できます。それでいきましょう。(^^;

まず、とにかくフォームで、チェックボックスの診断文をだらだら作っていきます。

<input type="checkbox">たばこは１日２０本以上吸う<br>

<input type="checkbox">お酒を飲むと性格が変わる<br>

<input type="checkbox">車を運転すると性格が変わる<br>

<input type="checkbox">刃物を手にすると心がなごむ<br>

<input type="checkbox">ピストルを所持している<br>

それを、ループ文をつかって、何個チェックされたか数えれば、ほぼ完成です。

チェックボックスの数分ループすればよいので、
for (i=0; i<5; i++){・・・}
i を０からはじめて、i が５以内であれば{ }内をループさせる、１回のループにつき、i を１加算する。
i が、０から４までのループ、つまり、５回ループさせます。

ちなみに、"myForm"の<FORM>タグ内に何個<INPUT>タグがあるかを調べるためには、
document.myForm.length
で、数がわかります。

for (i=0; i<document.myForm.length-1; i++)
なぜ、1 を引いているかというと、[診断]ボタンも、<INPUT>タグですので、1カウントされています。
なので、1 を引いてチェックボックスの数にしています。

<input type="checkbox" name="myTobacco">たばこは１日２０本以上吸う<br>
このチェックボックスがチェックされているか調べるためには、
document.myForm.myTobacco.checked
これで、"myForm"フォームの"myTobacco"のチェックボックスの状態を知ることができます。
チェックされていれば true、チェックされていなければ false のブール値がセットされています。

document.myForm.elements[i].checked
こんな感じで、elements[] を使うと、"myForm"フォームの i 番目のチェックボックスの状態を知ることができます。

なぜ、５回ループするのに、i を 0 から 4 までループさせるのかというのも、これで納得でしょうか？
テーブル番号はゼロから始まるのです。
あと、[診断]ボタンの位置にも気を付けてください。このサンプルは一番下にあるので、チェックボックスのテーブル番号は 0～4 となります。

あとの、if 文の説明は、もうよろしいでしょうか (^^;

if ( myCnt == 0 ) myMess="正常";
else if ( myCnt <= 2 ) myMess="ちょヤバ";
else if ( myCnt <= 4 ) myMess="危険気味";
else myMess="完璧に危険";
もしも、myCnt が０だったら、"正常"を myMess にセットして、それ以降の else 文は処理しません。

よって、小さい順に比較していけば、下のようにする必要はありません。

if ( myCnt == 0 ) myMess="正常";
else if ( myCnt>=1 && myCnt<=2 ) myMess="ちょヤバ";
else if ( myCnt>=3 && myCnt<=4 ) myMess="危険気味";
else myMess="完璧に危険";
以上、if 文のおさらいでした。(^^;
※ Step.68 参照

▲TOP

QA.1

[Ｑ] 危険度チェックの結果表示をダイアログボックスではなく、普通のHTMLページで表示したいのですが
[Ａ] 結果別に、location.href でリンクさせます。

if (myCnt == 0) myURL = "ans1.htm";
else if (myCnt <= 2) myURL = "ans2.htm";
else if (myCnt <= 4) myURL = "ans3.htm";
else myURL = "ans4.htm";
location.href = myURL;

▲TOP

QA.2

[Ｑ] チェックした数ではなく、チェックした項目で判定したいのですが
[Ａ] 以下のルールで判定してみます。

Q1またはQ2にチェックしていたら、「ストレスがたまっています」

Q3にチェックしていたら、「本来の性格が見え隠れしています」

Q4またはQ5にチェックしていたら、「心が病んでいます」

なにもチェックしていなければ、「あなたは健康体です」

を判定結果にします。複数パターンのチェックは該当結果を連結して表示します。

結果は alertではなく、ページ内に表示します(innerHTML)。

<script type="text/javascript"><!--
function myQA2(){
myHantei="";	// 判定結果のタグ
if (document.myForm2.myQ1.checked == true \|\| document.myForm2.myQ2.checked == true){	// Q1 か Q2 にチェックしている
myHantei += "<div>ストレスがたまっています。ストレス発散方法を見直しましょう</div>";
}
if (document.myForm2.myQ3.checked == true){	// Q3 にチェックしている
myHantei += "<div>本来の性格が見え隠れしています。バレないように注意しましょう</div>";
}
if (document.myForm2.myQ4.checked == true \|\| document.myForm2.myQ5.checked == true){	// Q4 か Q5 にチェックしている
myHantei += "<div>心が病んでいます。外に持ち歩かないように注意しましょう</div>";
}
if ( myHantei == "" ){	// １つもチェックしていなかった
myHantei += "<div>あなたは健康体です。少しは悩みを作りましょう</div>";
}
myHantei = "<strong>判定結果</strong><BR>" + myHantei;
document.getElementById( "myMess" ).innerHTML = myHantei;
}
// --></script>

<input type="checkbox" name="myQ1">Q1.たばこは１日２０本以上吸う<br>

<input type="checkbox" name="myQ2">Q2.お酒を飲むと性格が変わる<br>

<input type="checkbox" name="myQ3">Q3.車を運転すると性格が変わる<br>

<input type="checkbox" name="myQ4">Q4.刃物を手にすると心がなごむ<br>

<input type="checkbox" name="myQ5">Q5.ピストルを所持している<br>

</form>

▲TOP

実行例

リスト

使い方

説明

QA.1

QA.2