<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
<input type="checkbox" value="APPLE" onchange="pkSelectedData(this)"> APPLE
<input type="checkbox" value="BANANA" onchange="pkSelectedData(this)"> BANANA
<input type="checkbox" value="ORANGE" onchange="pkSelectedData(this)"> ORANGE

<div id="pkDisplayData"></div>

</body>

<script>
         let pkSelectedOptions = [];
        function pkSelectedData(checkbox) {
            const pkSelectedValue = checkbox.value;

            if (checkbox.checked) {
                if (!pkSelectedOptions.includes(pkSelectedValue)) {
                    pkSelectedOptions.push(pkSelectedValue);
                }
            } else {
                const pkIndex = pkSelectedOptions.indexOf(pkSelectedValue);
                if (pkIndex !== -1) {
                    pkSelectedOptions.splice(pkIndex, 1);
                }
            }
            pkUpdateSelectedOptionsDisplay();
        }

        function pkUpdateSelectedOptionsDisplay() {
            const pkDisplayDiv = document.getElementById('pkDisplayData');
            pkDisplayDiv.innerHTML = pkSelectedOptions.join(', ');
        }

</script>
</html>


Page Title APPLE BANANA ORANGE