JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="checkbox" onchange="filterData(event, 'friut', '蘋果')"> 蘋果
    </div>

    <div>
        <input type="checkbox" onchange="filterData(event, 'price', '300')"> 300
    </div>

</body>

<script>
    var checkBoxMap = {
        friut: {

        },
        price: {

        }
    };

    function filterData(e, checkBoxMapType, checkBoxText) {
        // 更新要篩選的項目
        var value = e.target.checked;

        if (value === true) {
            checkBoxMap[checkBoxMapType][checkBoxText] = true;
        }
        else {
            delete checkBoxMap[checkBoxMapType][checkBoxText];
        }

        console.log(checkBoxText, value);
        console.log(checkBoxMap);

        // 查詢與更新畫面
        updateView();
    }

    function updateView() {
        // 更新網址與畫面
    }

</script>

</html>