JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combined Radio Buttons and Select</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

    <form action="/submit" method="post">
        <label>
            <input type="radio" name="option" value="option1" class="radio-option" onclick="handleRadioClick(this)">
            Option 1
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option2" class="radio-option" onclick="handleRadioClick(this)">
            Option 2
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="option3" class="radio-option" onclick="handleRadioClick(this)">
            Option 3
        </label>
        <br>
        <label>
            Select an option:
            <select name="selectOption" class="select-option" onchange="handleSelectChange(this)">
                <option value="option4">Option 4</option>
                <option value="option5">Option 5</option>
                <!-- Diğer 15 seçenekleri buraya ekleyebilirsiniz -->
            </select>
        </label>
        <br>
        <input type="submit" value="Submit">
    </form>

    <script>
        function handleRadioClick(radio) {
            const selectOption = document.querySelector('.select-option');
            selectOption.classList.add('hidden');
        }

        function handleSelectChange(select) {
            const radioOptions = document.querySelectorAll('.radio-option');
            radioOptions.forEach(radio => {
                radio.checked = false;
            });
        }
    </script>

</body>
</html>