徒然 - GENESIS

全てのチェックボックスをチェック/解除する – JavaScript
テキストボックスの操作－JavaScript入門
チェックボックスを扱う－JavaScript入門
を参考に、テキストボックスとチェックボックスの入力情報を取得するスクリプトの備忘録です。

↓↓サンプル↓↓

html↓

<form name="form01">
	<h3>お名前</h3>
	<input type="text" name="name01" value="" placeholder="入力してください">
	<h3>好きなアーティスト</h3>
	<ul>
		<li><input type="checkbox" id="a" value="Alex Skolnick"><label for="a">Alex Skolnick</label></li>
		<li><input type="checkbox" id="b" value="Beethoven"><label for="b">Beethoven</label></li>
		<li><input type="checkbox" id="c" value="Chris Poland"><label for="c">Chris Poland</label></li>
		<li><input type="checkbox" id="d" value="Dream Theater"><label for="d">Dream Theater</label></li>
		<li><input type="checkbox" id="e" value="Emerson, Lake &amp; Palmer"><label for="e">Emerson, Lake &amp; Palmer</label></li>
		<li><input type="checkbox" id="f" value="Fair Warning"><label for="f">Fair Warning</label></li>
		<li><input type="checkbox" id="g" value="Genesis"><label for="g">Genesis</label></li>
		<li><input type="checkbox" id="h" value="Helloween"><label for="h">Helloween</label></li>
		<li><input type="checkbox" id="i" value="Iron Maiden"><label for="i">Iron Maiden</label></li>
		<li><input type="checkbox" id="j" value="Judas Priest"><label for="j">Judas Priest</label></li>
		<li><input type="checkbox" id="k" value="King Crimson"><label for="k">King Crimson</label></li>
		<li><input type="checkbox" id="l" value="Liquid Tension Experiment"><label for="l">Liquid Tension Experiment</label></li>
		<li><input type="checkbox" id="m" value="Mozart"><label for="m">Mozart</label></li>
		<li><input type="checkbox" id="n" value="Nevermore"><label for="n">Nevermore</label></li>
		<li><input type="checkbox" id="o" value="Ozzy Osbourne"><label for="o">Ozzy Osbourne</label></li>
		<li><input type="checkbox" id="p" value="Pink Floyd"><label for="p">Pink Floyd</label></li>
		<li><input type="checkbox" id="q" value="Queensryche"><label for="q">Queensryche</label></li>
		<li><input type="checkbox" id="r" value="Rage"><label for="r">Rage</label></li>
		<li><input type="checkbox" id="s" value="Savatage"><label for="s">Savatage</label></li>
		<li><input type="checkbox" id="t" value="Thin Lizzy"><label for="t">Thin Lizzy</label></li>
		<li><input type="checkbox" id="u" value="Uli Jon Roth"><label for="u">Uli Jon Roth</label></li>
		<li><input type="checkbox" id="v" value="Voivod"><label for="v">Voivod</label></li>
		<li><input type="checkbox" id="w" value="Whitesnake"><label for="w">Whitesnake</label></li>
		<li><input type="checkbox" id="x" value="Xentrix"><label for="x">Xentrix</label></li>
		<li><input type="checkbox" id="y" value="Yngwie Malmsteen"><label for="y">Yngwie Malmsteen</label></li>
		<li><input type="checkbox" id="z" value="Zeno"><label for="z">Zeno</label></li>
	</ul>
	<input type="button" value="全部にチェック" onclick="checkAll()">
	<p></p>
	<input type="button" value="あ、間違えちゃった" onclick="clearData()"><br />
	<input type="button" value="OK" onclick="showMessage()">
</form>

JavaScript↓

function showMessage() {

	//名前取得
	if (document.form01.name01.value=="") {
		var yourName="匿名希望";
	}
	else {
		var yourName=document.form01.name01.value;
	}

	//チェックされた項目を調べる
	var favorite="";
	var fav=0;
	for (i=0;i<document.form01.elements.length;i++) {
		if(document.form01.elements[i].checked) {
			if(favorite !=""){favorite=favorite+"と\n"}
			favorite=favorite+document.form01.elements[i].value;
			fav++;
		}
	}
	
	//チェックに応じたメッセージ作成
	if(fav==0) {
		favorite="上のどれも好きではないんですね。\n\n（´・ω・）しょぼ～ん"
	}
	else if (fav==document.form01.elements.length-4) {
		favorite="全部好きですか！(ﾟ∀ﾟﾉ)ﾉ\n\n今度お話しましょうヾ(´・ω・)人(・ω・`)ﾉｼﾞ"
	}
	else {
		favorite=favorite+"\nの"+fav+"アーティストが好きなんですね。\n\n＼(＾o＾)／わぁい～"
	}

	//メッセージ表示
	alert("こんにちは！"+yourName+"さん。"+"\n\n\n"+yourName+"さんは、\n"+favorite)
}


function clearData() {
	document.form01.name01.value="";
	for (i=0;i<document.form01.elements.length;i++) {
		document.form01.elements[i].checked=false;
	}
}


function checkAll() {
	for (i=1;i<document.form01.elements.length-3;i++) {
		document.form01.elements[i].checked=true;
	}
}