ラジオボタン、チェックボックスで選んだものに対応するコンテンツを自動表示させたい

Question

前提・実現したいこと

ウェブサイト上でラジオボタンとチェックボックスを用意し、
押したボタンに対応するコンテンツを表示させたいです。

つまりラジオボタンに
① ② ③
があり、
チェックボックスに
A B C D E
がある状態とします。

コンテンツ＜あ＞はラジオボタンを問わず、Aが選ばれていれば表示、
コンテンツ＜い＞は①かつ、AもしくはBが選ばれていた場合に表示、
というようなことがしたいです。

発生している問題・エラーメッセージ

①かつAが選ばれている場合は＜あ＞のような1:1の関係の表示はできるのですが、
どうすれば上記のような複数条件に対応するような表示の仕方ができるのか、
調べてみたのですがよくわからない状況です。
アドバイスいただけますと幸いです。

該当のソースコード

■HTML
<div class="search-box mb">
	<span class="search-box_title">■ラジオボタン</span><br>
	<label><input type="radio" name="kind" value="kind01">①</label>
	<label><input type="radio" name="kind" value="kind02">②</label>
	<label><input type="radio" name="kind" value="kind03">③</label>
</div>
<br>
<div class="search-box">
	<span class="search-box_title">■チェックボックス</span><br>
	<label><input type="checkbox" name="cat" value="cat01">A</label>
	<label><input type="checkbox" name="cat" value="cat02">B</label>
	<label><input type="checkbox" name="cat" value="cat03">C</label>
	<label><input type="checkbox" name="cat" value="cat04">D</label>
	<label><input type="checkbox" name="cat" value="cat05">E</label></div>
<div class="cat_image_all">
	<div class="cat_image" data-kind="kind01" data-cat="cat01">
		<a href="XXX">
		<img src="YYY" alt="">
		<p class="page_title">あ</p>
		</a>
	</div>	<div class="cat_image" data-kind="kind02" data-cat="cat02">
		<a href="XXX">
		<img src="YYY" alt="">
		<p class="page_title">い</p>
		</a>
</div>

■CSS
.search-box_title{
	font-weight: bold;
}
.search-box label {
	cursor: pointer;
	display: inline-block;
	margin-right: 10px;
	line-height: 16px;
}
.search-box input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: -2px 5px 0 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: middle;
}
.search-box input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: -2px 5px 0 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: middle;
}
.cat_image_all {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 640px;
	margin: 3em auto 0;
}
.cat_image {
	width: 48%;
	max-width: 190px;
	margin: 0 0 2em;
}
.cat_image.is-hide {
	display: none;
}
.cat_image a {
	display: block;
	color: #444;
}
.cat_image a:hover {
	text-decoration: underline;
}

■JavaScript
var searchBox = '.search-box';
var searchItem = '.search-box input';
var listItem = '.cat_image';
var hideClass = 'is-hide';

$(function() {
	$(searchItem).on('change', function() {
		search_filter();
	});
});

function search_filter() {
	$(listItem).removeClass(hideClass);
	for (var i = 0; i < $(searchBox).length; i++) {
		var name = $(searchBox).eq(i).find('input').attr('name');
		var searchData = selected_items(name);
		if(searchData.length === 0 || searchData[0] === '') {
			continue;
		}
		for (var j = 0; j < $(listItem).length; j++) {
			var itemData = $(listItem).eq(j).data(name);
			if(searchData.indexOf(itemData) === -1) {
				$(listItem).eq(j).addClass(hideClass);
			}
		}
	}
}

function selected_items(name) {
	var searchData = [];
	$('input[name=' + name + ']:checked').each(function() {
		searchData.push($(this).val());
	});
	return searchData;
}

試したこと

ネットで似たようなことをされようとしている人のブログなどを探したのですが見つからず
ここに辿り着きました。

補足情報（FW/ツールのバージョンなど）

Answer 1

<style>
.hide{display:none;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.cat_image').forEach(x=>x.classList.add('hide'));
  document.querySelectorAll('[name=kind],[name=cat]').forEach(x=>{
    x.addEventListener('change',()=>{
      document.querySelectorAll('.cat_image').forEach(y=>{
        const k1=y.dataset["kind"];
        const k2=k1?document.querySelector(`[name=kind][value=${k1}`).checked:true;
        const c1=y.dataset["cat"];
        const c2=c1?document.querySelector(`[name=cat][value=${c1}`).checked:true;
        y.classList.toggle('hide',!k2||!c2);
        console.log([k1,k2,c1,c2]);
      });
    });
  });
});
</script>
<div class="search-box mb">
    <span class="search-box_title">■ラジオボタン</span><br>
    <label for="k1"><input type="radio" name="kind" value="kind01">kind01</label>
    <label for="k2"><input type="radio" name="kind" value="kind02">kind02</label>
    <label for="k3"><input type="radio" name="kind" value="kind03">kind03</label>
</div>
<div class="search-box">
    <span class="search-box_title">■チェックボックス</span><br>
    <label for="c1"><input type="checkbox" name="cat" value="cat01">cat1</label>
    <label for="c2"><input type="checkbox" name="cat" value="cat02">cat2</label>
    <label for="c3"><input type="checkbox" name="cat" value="cat03">cat3</label>
    <label for="c4"><input type="checkbox" name="cat" value="cat04">cat4</label>
    <label for="c5"><input type="checkbox" name="cat" value="cat05">cat5</label>
</div>
<div>
<div class="cat_image" data-kind="kind01">
kind01
</div>
<div class="cat_image" data-kind="kind01" data-cat="cat01">
kind01/cat01
</div>
<div class="cat_image" data-kind="kind02" data-cat="cat01">
kind02/cat01
</div>
<div class="cat_image" data-kind="kind02" data-cat="cat02">
kind02/cat02
</div>
<div class="cat_image" data-cat="cat02">
cat02
</div>
</div>

Answer 2

そやの〜。前提として

• 変数 kind に、選択されているラジオボタンのvalueが、
• 変数 cats に、チェックされているチェックボックスのvalueの配列が

入っているとしよか〜。そうすると、

• ラジオボタンを問わず、Aが選ばれている

ときは

cats.includes('cat01')

がtrueだし、

• ①かつ、AもしくはBが選ばれていた場合

というのは

kind === 'kind01' && cats.some(cat => ['cat01', 'cat02'].includes(cat))

がtrueになるゆう感じでいけるやろ思いますわ ➡ サンプル (※ <form> 追加して、ラジオボタンとチェックボックスくくってます。それと「あ」と「い」は簡易なものに差し替えてますぅ)

追記： <form>追加しなくてもできる ➡ サンプル2

追記2:

別案ですぅ〜。

ラジオボタンとチェックボックスのvalue属性として現れる文字列（kind01 から cat05 までの全て）をプロパティとして持ち、その値はチェックされていればtrue、チェックされていなければfalseになっとるゆうオブジェクトを flags として作れば、

• ラジオボタンを問わず、Aが選ばれている

ときは

flags.cat01

がtrueだし、

• ①かつ、AもしくはBが選ばれていた場合

というのは

flags.kind01 && (flags.cat01 || flags.cat02)

がtrueになるということでいけます。

ほんで、こないなflagsは

const flags = [...document.querySelectorAll('input')].reduce(
    (obj, { value, checked }) => ({ ...obj, [value]: checked }), {});

で作れんで ➡ サンプル3