テキストボックスの入力制御

お世話になっております。

javascriptblurやchangeについてお伺いしたいことがございます。
下記コードを今コーディングしているのですが、
selectboxの入力変化に応じて動的に入力項目の背景色変更を行いたいと思っています。

ですが下記コードですと、selectboxを変更した後に、textboxにカーソルを合わせると、
selectboxに応じていないところまでピンク色が変わってしまいます。
やりたいこと

サンプル1を選択しているとき
テスト、テスト2の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持
サンプル2を選択しているとき
テスト3、テスト4の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持

javascript初心者のため、うまく組めていないのだと思いますが、ご教授願います。
乱雑なコードで申し訳ございませんが下記コードがそのものです。

HTML
1<html>
2<head>
3	<title>タイトル</title>
4	<script src="../js/1.4.2jq.js"></script>
5	<script type="text/javascript" src="../js/example1.js"></script>
6</head>
7
8<body bgcolor=white background="">
9	<h1>テスト</h1>
10
11	<select name = 'iikanji' id = 'iikanji'>
12		<option value="0">サンプル1</option>
13		<option value="1">サンプル2</option>
14		<option value="2">サンプル3</option>
15	</select><br><br><br><br><br>
16	<br>
17	テスト
18	<input type="text" name="test1"><br>
19	テスト2
20	<input type="text" name="test2"><br>
21	テスト3
22	<input type="text" name="test3"><br>
23	テスト4
24	<input type="text" name="test4"><br>
25
26	<input type="text">
27	<input value="dummy" type="button">
28
29</body>
30</html>
31

javascript
1
2$(function(){
3
4
5	$('input[type=text]').css({
6		backgroundColor: '#fff',
7		border: '#666666 1px solid'
8	});
9
10
11	colorchange = aaa();
12	$('select[name = iikanji]').change(function(){
13		
14		$('input').each(function(){
15
16			if(this.value == ""){
17				$(this).css("background-color","#ffffff");
18			}
19		});
20
21		colorchange = aaa();
22		console.log(colorchange); // 出力
23		bbb(colorchange);
24	});
25	bbb(colorchange);
26});
27
28
29
30
31// $(function(){
32// 	$("input").blur(function () {
33// 		console.log(this.type+" lost focus.");
34// 		//alert('aaaaaaaaaaa');
35// 	}); 
36// });
37
38
39function aaa (){
40
41	var colorchange = [];
42	var val = $('[name=iikanji]').val();
43
44	switch(val){
45		case "0":
46		colorchange = ['test1','test2'];
47		break;
48		case "1":
49		colorchange = ['test4','test3'];
50		break;
51
52		case "2":
53		colorchange = ['test1'];
54		break;
55		case "3":
56		colorchange = ['test2'];
57		break;
58	}
59	return colorchange;
60
61};
62
63function bbb (colorchange){
64
65	for (var i = 0; i <= colorchange.length; i++) {
66
67		$('input[name = ' + colorchange[i] + ']').each(function(){
68			if(this.value == ""){
69				$(this).css("background-color","#ffebeb");
70			} else {
71				$(this).css("background-color","#ffffff");
72			}
73		});
74	}
75	for (var i = 0; i <= colorchange.length; i++) {
76		$('input[name = ' + colorchange[i] + ']').blur(function(){
77console.log('aaa' +colorchange[i]); // 出力
78if(this.value == ""){
79	$(this).css("background-color","#ffebeb");
80} else {
81	$(this).css("background-color","#ffffff");
82}
83});
84	}
85	for (var i = 0; i <= colorchange.length; i++) {
86		$('input[name = ' + colorchange[i] + ']').focus(function(){
87			if(this.value == ""){
88				$(this).css("background-color","#ffebeb");
89			} else {
90				$(this).css("background-color","#ffffff");
91			}
92		});
93	}
94};
95

行動規範の内容に同意します

回答1件

とりあえず仕様がいまいちわからなかったので適当に作りました。
今回作成した部分は

サンプル1を選択しているとき
テスト、テスト2の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持
サンプル2を選択しているとき
テスト3、テスト4の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持

になります。
他のtextをクリックしてと書いてありますが、その部分に関してblurを使用されていましたがblurいるのかなぁと思ってみたり。。。

かるくリファクタリングを入れているので分かりづらかったらすいません。。。

html
1<html>
2<head>
3  <title>タイトル</title>
4  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
5  <style>
6    input{
7      border: '#666666 1px solid';
8      background: '#ffffff';
9    }
10  </style>
11</head>
12
13<body>
14  <h1>テスト</h1>
15  <select name='iikanji' id='iikanji'>
16    <option value="0">サンプル1</option>
17    <option value="1">サンプル2</option>
18    <option value="2">サンプル3</option>
19  </select>
20  <br>
21  <br>
22  <br>
23  <br>
24  <br>
25  <br>
26
27  テスト
28  <input type="text" name="test1" class="jsInputs"><br>
29  テスト2
30  <input type="text" name="test2" class="jsInputs"><br>
31  テスト3
32  <input type="text" name="test3" class="jsInputs"><br>
33  テスト4
34  <input type="text" name="test4" class="jsInputs"><br>
35
36  <input type="text">
37  <input value="dummy" type="button">
38  <script type="text/javascript" src="index.js"></script>
39</body>
40</html>

javascript
1// inputタグに使う色を定義
2var inputColor = {
3  focus: '#ffebeb',
4  notFocus: '#ffffff'
5}
6
7// selectボックスの値に対してどのinputかを定義
8var targetInputs = {
9  0: ['test1','test2'],
10  1: ['test4','test3'],
11  2: ['test1']
12}
13
14// 選択されているvalueから色を変えたいinputと色を白にしたいinputを分けて返す
15var targetInputsFromSelectedValue = function(selectedValue){
16  var _targets = {
17        focus: [],
18        notFocus: []
19      },
20      $inputs = $('.jsInputs');
21
22  $inputs.each(function(item, index){
23    var $this = $(this);
24    if(targetInputs[selectedValue].indexOf($this.attr('name')) > -1){
25      _targets.focus.push($this)
26    }else{
27      _targets.notFocus.push($this)
28    }
29  })
30
31  return _targets;
32}
33
34// 振り分けられたhashの中身を全て回してfocusしないところは白に
35// focusするところはnullであれば色を変え、そうでない場合は白にする
36var setColorToInputs = function(targetInputs){
37  Object.keys(targetInputs).forEach(function(key){
38    var $inputs = targetInputs[key]
39    for(var i = 0; i < $inputs.length; i++){
40      var $input = $inputs[i]
41      var isNull = ($input.val() === '') ? true : false;
42
43      if(key === 'notFocus'){
44        $input.css('background', inputColor.notFocus)
45      }else{
46        $input.css('background', inputColor[isNull ? 'focus' : 'notFocus'])
47      }
48    }
49  })
50
51}
52
53// イベントを登録する
54var bindEvent = function(){
55  $("#iikanji").on('change', function(){
56    var value = $(this).val();
57    var $targetInputs = targetInputsFromSelectedValue(value)
58
59    setColorToInputs($targetInputs)
60  });
61}
62
63bindEvent()