【JavaScript】2個以上の条件の分岐（switch文）

By matumoto – 2009/10/14

たびたび松本です。忘れないうちに書いておきます。主に自分用メモになってるのは気にしない。

さて、今回は「0のときは●●、1のときは●●、2のときは●●」をクールに書いてみたい！がテーマです。今まで覚えられずに避けてきたswitch構文を使います。

まずやりたいことは前回のエントリーに書いたとおり、

2つ目のラジオボタンがオンのときはプルダウンを有効に
それ以外のときはプルダウンを無効に
3つ目のラジオボタンがオンのときは新規アドレス入力を表示

です。

イメージ図

とりあえず普通にif文で振り分けたときの書き方がこちら

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が0のとき
if(v==0) {
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
// 値が1のとき
} else if(v==1) {
		$("#select_addressbook").removeAttr('disabled'); // プルダウンからdisableをはずす
		$('#newAddress').hide(); // 新規アドレス入力を非表示
// 値が2のとき
} else if(v==2) {
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').slideDown(); // 新規アドレス入力を表示
}

これが分からない人はコメントください。デスマーチ抜けたらその辺から解説します（泣

さて、これでも良いといえば良いんですが、せっかく「変数の値によって処理を振り分ける」Switch構文があるのだから、やってみたい！覚えてみたい！

というわけでおさらいしました。基本構文がこちら

switch (変数) {
	case 1:
		変数が1の時の処理;
		break; // 抜ける
	case 2:
		変数が2の時の処理;
		break; // 抜ける
	case 3:
		変数が3の時の処理;
		break; // 抜ける
	default:
		それ以外の処理;
}

分かりやすいように変数を数字にしていますが、もちろん文字列でもいいですよ！そのときはcaseのあとの値をダブルクオーテーションなどで囲むのを忘れないで下さい。

さて、では最初のif文をswith文に書き直してみるとどうなるでしょうか。

switch (v) {
	case 1:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
		break;
	case 2:
		$("#select_addressbook").removeAttr('disabled'); // プルダウンからdisableをはずす
		$('#newAddress').hide(); // 新規アドレス入力を非表示
		break;
	case 3:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').slideDown(); // 新規アドレス入力を表示
		break;
	default:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
}

うん、やっぱり視認性が高いと言うか、ぱっと見分かりやすいですね。特に分岐が10以上とかになっちゃうときには、いちいちif文書いてられないと思うのでswitch文が大活躍です。

私もこれを機会にきっちり覚えて、適所で使えるようになろうと思います。

ちなみに、実際のページで動かすには「ページがロードされたとき」と「ラジオボタンが変更されたとき」の両方で走らせたい処理なので、function（関数）として定義して呼べるようにします。そのソースはこちら。

$(function(){
	// 変数の定義
	var v = new String();
	// 関数の定義
	var changeAddress = function(){
		v = $('input[name="address"]:checked').val();
		switch (v) {
			case "0":
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').hide();
				break;
			case "1":
				$("#select_addressbook").removeAttr('disabled');
				$('#newAddress').hide();
				break;
			case "2":
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').slideDown();
				break;
			default:
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').hide();
		}
	}
	// ラジオが変更されたときに呼ぶ
	$('input[name="address"]').change(changeAddress);
	// ページが読み込まれたときに呼ぶ
	changeAddress();
});