有没有一种方法可以使用单选按钮和复选框创建Javascript过滤器？

Question

我有这项任务必须尽快完成，在过去的几天里我一直在努力解决这个问题，但是不幸的是，我每次都失败了。我需要创建一个过滤器，用户可以单击单选按钮以获取那些特定课程，在此之后甚至之前，他可以单击复选框以进一步过滤。

我设法通过单选按钮进行了过滤的“第一部分”，最大的问题是我无法使用复选框进行过滤，因为例如->您不能从复选框中选择2个选项。

这是HTML

                    By subject:<br>
                    <form action="">
                            <input type="radio" name="name" value="Computing & IT">Computing & IT</input><br>
                            <input type="radio" name="name" value="Psychology & Sociology">Psychology & Sociology</input><br>
                            <input type="radio" name="name" value="Business & Management">Business & Management</input><br>
                            <input type="radio" name="name" value="Law & Criminology">Law & Criminology</input><br>
                            <input type="radio" name="name" value="Data Analytics">Data Analytics</input><br>
                            <input type="radio" name="name" value="Finance">Finance</input><br>
                            <input type="radio" name="name" value="Human Resource Management">Human Resource Management</input><br>
                            <!-- <input type="submit" value="Submit"> -->
                    </form>
                    <hr>
                    <h4> By Award:</h4>
                    <form action="">
                        <input type="checkbox" value="Postgraduate">Postgraduate</input><br>
                        <input type="checkbox" value="Undergraduate">Undergraduate</input><br>
                        <input type="checkbox" value="Top-Up">Top-Up</input><br>
                    </form>

这是JS

fetch("https://api.myjson.com/bins/1axsrs")
.then(response => response.json())
.then(data =>  {
    let api_array = data.name;
    let radio = document.querySelectorAll('input[type=radio]');
    let checkboxes = document.querySelectorAll('input[type=checkbox]')
    api_array.map(item => {
        document.getElementById('app').innerHTML +=
        `<div class="card">
        <h6>${item.vertical}</h6>
        <h4>${item.program}</h4>
        <p>${item.level}</p>
        <button class="myButton">Enquire Now</button>
        `
    })
    for(let select of radio) {
        select.addEventListener('click',() => {
            document.getElementById('app').innerHTML = "";
            let api_array = data.name.filter(e => e.vertical === select.value)
            api_array.map(item => {
                document.getElementById('app').innerHTML +=
                `<div class="card">
                <h6>${item.vertical}</h6>
                <h4>${item.program}</h4>
                <p>${item.level}</p>
                <button class="myButton">Enquire Now</button>
                `
            })
            for(let check of checkboxes) {
                check.addEventListener('change',() => {
                    document.getElementById('app').innerHTML = "";
                    if(check.checked) {
                    let chosen = api_array.filter(c => c.level === check.value)
                    chosen.map(item => {
                        document.getElementById('app').innerHTML +=
                        `<div class="card">
                        <h6>${item.vertical}</h6>
                        <h4>${item.program}</h4>
                        <p>${item.level}</p>
                        <button class="myButton">Enquire Now</button>
                        `
                    })
                    } else {
                    }
                }) 
            }
        })
    }
})