JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>HTML Input Radio ve Select</title>
</head>
<body>

  <input type="radio" name="ilk" value="1"> İlk
  <input type="radio" name="ikinci" value="2"> İkinci
  <input type="radio" name="ucuncu" value="3"> Üçüncü

  <select name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
  </select>

  <p>Seçili input: <span id="selected-input"></span></p>

  <script>
    // input radio'ların ve select'in seçili durumunu takip etmek için bir değişken tanımla
    var selected = null;

    // input radio'lara tıklandığında seçili durumunu değiştir
    function radioClick(event) {
      // önceki seçili input veya select'i seçili olmaktan çıkar
      if (selected !== null) {
        selected.selected = false;
      }

      // yeni seçilen input veya select'i seçili duruma getir
      selected = event.target;
      selected.selected = true;

      // seçili input'un adını ekrana bas
      document.getElementById("selected-input").innerHTML = selected.name;
    }

    // input radio'lara tıklandığında bu fonksiyonu çalıştır
    for (var i = 0; i < document.querySelectorAll("input[type='radio']").length; i++) {
      document.querySelectorAll("input[type='radio']")[i].addEventListener("click", radioClick);
    }

    // select'e tıklandığında seçili durumunu değiştir
    function selectClick(event) {
      // önceki seçili input veya select'i seçili olmaktan çıkar
      if (selected !== null) {
     ...

CSS

body {
  font-family: sans-serif;
  font-size: 16px;
}

input {
  margin: 10px;
}

select {
  width: 100px;
}