JSFiddle - React, Tailwind, and code Playground

by evgeniydoronin

HTML

<div class="group">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="10">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="20">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="30">
        <input type="checkbox" class="input_data" name="tseremonii" onclick="onlyOne(this)" value="40">
    </div>
    <div class="group">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="50">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="60">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="70">
        <input type="checkbox" class="input_data" name="mesto-provedeniya" onclick="onlyOne(this)" value="80">
    </div>
    <script>

        function onlyOne(checkbox) {
            var input_item = document.getElementsByClassName('input_data');

            for (var j = 0; j < input_item.length; j++) {
                
                var checkboxes = document.getElementsByName(input_item[j].name);


                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i] !== checkbox) checkboxes[i].checked = false;
                }
            }
            
        }
    </script>