select optionを使った絞り込み検索をinput radioで検索ができるようにしたい

Question

前提・実現したいこと

select optionを使った絞り込み検索をinput radioで検索ができるようにしたいです。
select optionのプルダウンを、ラジオボタンに変更したいためです。

しかし、select optionでは問題なく動くのですが、input radioに変更すると動かなくなります。
ご教授お願いします。

HTMLの記述内容

<div class="filterArea">	
	<div class="filter_life_box">
		<div class="filter_life">
			<select name="life" size="5">
				<option value="">ALL</option>
				<option value="1">TYPE</option>
				<option value="2">SHOP</option>
				<option value="3">OFFICE</option>
			</select>
		</div>
	</div>
	<div class="filter_keyword">
		<input class="window" type="text" name="filter_free" size="40" />&nbsp;<button type='button' name='free_submit'></button>
	</div>	
	<div class="filter_tag">
		<input type="checkbox" name="tag" value="tag1" id="chk01"><label for="chk01">tag1</label>
		<input type="checkbox" name="tag" value="tag2" id="chk02"><label for="chk02">tag2</label>
		<input type="checkbox" name="tag" value="tag3" id="chk03"><label for="chk03">tag3</label>
		<input type="checkbox" name="tag" value="tag4" id="chk04"><label for="chk04">tag4</label>
		<input type="checkbox" name="tag" value="tag5" id="chk05"><label for="chk05">tag5</label>
		<input type="checkbox" name="tag" value="tag6" id="chk06"><label for="chk06">tag6</label>
		<input type="checkbox" name="tag" value="tag7" id="chk07"><label for="chk07">tag7</label>
	</div>			
<!--/.filterArea--></div>
<div class="resultArea">
	<div class="productCntArea"></div>
	<div class="productArea"></div>	
<!--/.resultArea--></div>

$(function() {
	/*================================================================
	情報
	================================================================*/
	var allList = [
		{
			link: "https://www.google.com/",
			id: "id0001",
			life: 14,
			title: "テスト1",
			tag: ["tag1"],
			description: "sub text………………………………………………………"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0002",
			life: 2100,
			title: "テスト2",
			tag: ["tag1","tag2"],
			description: "sub texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0003",
			life: 1040,
			title: "テスト3",
			tag: ["tag3"],
			description: "sub text"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0004",
			life: 2110,
			title: "テスト4",
			tag: ["tag1","tag2","tag4"],
			description: "sub text"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0005",
			life: 1155,
			title: "テスト5",
			tag: ["tag2","tag5"],
			description: "sub text"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0006",
			life: 2222,
			title: "テスト6",
			tag: ["tag2","tag6"],
			description: "sub text"
		}, 
		{
			link: "https://www.google.com/",
			id: "id0007",
			life: 44,
			title: "テスト7",
			tag: ["tag2","tag7"],
			description: "sub text"
		}
	];		

	/*================================================================
	スクリプトはじまり
	================================================================*/
	function init() {
		
		//イベント登録
		$(".filter_life select").on("change", onFilterChange);
		$(".filter_tag input").on("change", onFilterChange);
		$(".filter_keyword button").on("click", onFilterChange);
	

		//最初は全て出力
		refleshHtml(allList);
	}

	/*================================================================
	HTML出力
	================================================================*/
	function refleshHtml(list) {
		
		var outputHtml = '';

		//出力する内容をoutputHtmlに格納
		if (list.length > 0) {
			_.each(list, function(line, i) {
				outputHtml += '<a href="' + line.link + '" class="product">';
				outputHtml += '	<div class="photo"><img src="images/' + line.id + '.jpg" alt="' + line.title + '" /></div>';
				outputHtml += '	<div class="info">';
				outputHtml += '		<h3 class="productTitle">' + line.title + '</h3>';
				/*
				outputHtml += '		<p class="productLife">価格（税込）:&nbsp;' + line.life + '円</p>';
				*/
				outputHtml += '		<p class="description">' + line.description + '</p>';
				outputHtml += '		<ul class="tag">';					
				_.each(line.tag, function(tag, i){
				outputHtml += '			<li>' + tag + '</li>';	
				});				
				outputHtml += '		</ul>';
				outputHtml += '	</div>';
				outputHtml += '<!--/.product--></a>';
			});
		} else {
			outputHtml += '<div class="noproduct"><p>条件に当てはまる施工事例を検索できませんでした。</p></div>';
		}

		//HTML出力（フェードインアニメーションつき）
		$('.productArea').html(outputHtml);	
		$('.productArea .product').css({opacity: 0}).each(function(i){$(this).delay(100 * i).animate({opacity:1}, 300);
		});
		
		//検索件数表示
		$('.productCntArea').html('<p>' + allList.length + '件中 ' + list.length + '件を表示</p>');
	}

	/*================================================================
	絞り込み条件を変更した時
	================================================================*/
	function onFilterChange(e) {
		
		var filterFncs = []; 
		var result = []; 

		//セレクトボックスの値を引数に指定した関数filterByLifeをfilterFuncs配列に格納
		filterFncs.push(
			function(list) {
				return filterByLife(list, $('.filter_life select').val());
			}
		);

		//チェックボックスの値を引数に指定した関数filterByTagをfilterFuncs配列に格納
		filterFncs.push(
			function(list) {
				return filterByTag(list, $('.filter_tag input:checked'));
			}
		);

		//キーワードの値を引数に指定した関数filterByKeywordをfilterFuncs配列に格納
		filterFncs.push(
			function(list) {
				return filterByKeyword(list, _.escape($('.filter_keyword input').val()));
			}
		);

		//FilterFuncs配列内の関数をバケツリレーみたいに1つずつ実行して結果をresult配列に格納
		result = _.reduce(filterFncs, function(list, fnc) {
			return fnc(list);
		}, allList);

		//絞り込んだ結果を出力
		refleshHtml(result);		
	}

	/*================================================================
	絞り込み[1] セレクトボックス絞り込み関数
	================================================================*/
	function filterByLife(list, value) {
		
		//絞り込み指定がない場合はリターン
		if (value == "") {
			return list;
		}

		//選択したセレクトボックスとlifeがマッチするかでフィルタリング
		return _.filter(list, function(item) {
			switch (value) {
				/*
				case '1':
					return item.life <= 1;
				*/
				
				case '1':
					return 1 < item.life && item.life <= 1000;
				case '2':
					return 1001 < item.life && item.life <= 2000;
				case '3':
					return 2001 < item.life && item.life <= 3000;
			}
		});
	}

	/*================================================================
	絞り込み[2] チェックボックス絞り込み関数
	================================================================*/
	function filterByTag(list, value) {
		
		//絞り込み指定がない場合はリターン
		if (value.length == 0) {
			return list;
		}

		//選択した属性（チェックボックス）とtagがマッチするかでフィルタリング
		return _.filter(list, function(item) {
			
			var isMatch = false;

			//配列同士の比較
			_.each(value, function(chkItem, i) {
				
				_.each(item.tag, function(tagItem, i) {
					if (tagItem === $(chkItem).val()) {
						isMatch = true;
					}
				});
				
			});

			return isMatch;
		});
	}

	/*================================================================
	絞り込み[3] テキストボックス絞り込み関数
	================================================================*/
	function filterByKeyword(list, value) {

		//絞り込み指定がない場合はリターン
		if (value == "") {
			return list;
		}

		//検索キーワードを配列に格納（スペースがある場合は複数格納）
		var freeAry = [];　
		var val = value.replace(/　/g, " ");
		searchAry = val.split(" ");

		//入力したキーワードがtitleもしくdescriptionにマッチするかでフィルタリング
		return _.filter(list, function(item) {

			var isMatch = false;

			_.each(searchAry, function(data, i) {
				if (item.title.indexOf(data) != -1 || item.description.indexOf(data) != -1) {
					isMatch = true;
				}
			});

			return isMatch;

		});

	}

	/*================================================================
	スクリプトはじめ
	================================================================*/
	init();

});

試したこと

以下のHTMLおよびjs上のselectをinputに変更してみました。

<!--※変更前-->
<select name="life" size="5">
	<option value="">ALL</option>
	<option value="1">TYPE</option>
	<option value="2">SHOP</option>
	<option value="3">OFFICE</option>
</select>

<!--※変更後-->
//【selectからinputに】
<label for="ra01">
  <input type="radio" name="life" value="" id="ra01">ALL
</label>
<label for="ra02">
  <input type="radio" name="life"  value="1" id="ra02">TYPE
</label for="chk01">
<label for="ra03">
  <input type="radio" name="life"  value="2" id="ra03">SHOP
</label>
<label for="ra04">
  <input type="radio" name="life"  value="3" id="ra04">OFFICE
</label>

<!--※変更前-->
function init() {
	//イベント登録 
	$(".filter_life select").on("change", onFilterChange);
・
・
・

<!--※変更後-->
function init() {
	//イベント登録 
	//【".filter_life select"】を以下に
	$(".filter_life input").on("change", onFilterChange);
・
・
・


<!--※変更前-->
/*================================================================
絞り込み条件を変更した時
================================================================*/
function onFilterChange(e) {
	var filterFncs = []; 
	var result = []; 

	//セレクトボックスの値を引数に指定した関数filterByLifeをfilterFuncs配列に格納
	filterFncs.push(
		function(list) {
			return filterByLife(list, $('.filter_life select').val());
		}
	);
・
・
・

<!--※変更後-->
/*================================================================
絞り込み条件を変更した時
================================================================*/
function onFilterChange(e) {
	
	var filterFncs = []; 
	var result = []; 

	//セレクトボックスの値を引数に指定した関数filterByLifeをfilterFuncs配列に格納
	filterFncs.push(
		function(list) {
　　　　　　　　　　　　//【return filterByLife(list, $('.filter_life select').val());】から変更
			return filterByLife(list, $('.filter_life input').val());
		}
	);
・
・
・

Answer 1

こんにちは

変更後の onFilterChange で、 filterFncs に 関数をpush する部分を、以下のように修正してみるといかがでしょう？

+ var that = this;

  filterFncs.push(
    function(list) {
-     return filterByLife(list, $('.filter_life input').val());
+     return filterByLife(list, $(that).val());
    }
  );

すなわち、

• push する直前に var that = this; という行を追加
• push する関数本体にある、$('.filter_life input') を $(that) に変更

という2点の追加、修正です。

参考になれば幸いです。

追記

以下の修正では、いかがでしょうか？

- return filterByLife(list, $('.filter_life select').val());
+ return filterByLife(list, $('.filter_life input:checked').val());

Comments

[yuhki]

ご解答くださりありがとうございます！

動くには動いたのですが、、
正しくvalueの値を受け取れていないのか、filter_tagのチェックボックスを選択を行うと間違った出力をしてしまいます…。。

[jun68ykt]

コメントありがとうございます。
ご質問にあるコードを再度よく読みましたところ、onFilterChange　は、ラジオボタンに修正する前のコードに

$(".filter_life select").on("change", onFilterChange);
$(".filter_tag input").on("change", onFilterChange);
$(".filter_keyword button").on("click", onFilterChange);

とあるように、3つのセレクタによる要素のイベントで共用されるのですね。そこを見落としていました。申し訳ありませんが、上記の回答は取り下げます。

[jun68ykt]

あらためて、回答のほうに修正案を追記しました。

ただし、追記した修正案は、ラジオボタンに修正された後も、ラジオボタンは

<div class="filter_life">
･･･
</div>

に囲まれている前提です。参考になれば幸いです。

[yuhki]

思っていたような挙動となりました！！！
ありがとうございます！とても助かりました…。

[jun68ykt]

どういたしまして????
> 思っていたような挙動となりました！！！
とのことで、よかったです????

Answer 2

$('[name=life]:checked').val()

Comments

[yuhki]

ご解答くださり有難うございます！
こちら、試してみたのですが動きませんでした…。

return filterByLife(list, $('[name=life]:checked').val()

上記のようにということで間違えないでしょうか？