Выберите одну радиокнопку за раз

Question

Я хочу выбрать один вариант за раз из трех вариантов.

На данный момент я могу выбрать радиоприемник при нажатии на div, но я хочу, чтобы только один из них выбирался из списка, поэтому он должен переключаться.

Проверьте мою скрипку здесь: http://jsfiddle.net/wbgthtyb/

HTML:

<div class="grid-100"> 
    <div class="tckt-tab active"> 
     <input type="radio" name="one" value="one">one 
    </div> 
</div> 
<div class="grid-100"> 
    <div class="tckt-tab"> 
     <input type="radio" name="two" value="two">two 
    </div> 
</div> 
<div class="grid-100"> 
    <div class="tckt-tab"> 
     <input type="radio" name="three" value="three">three 
    </div> 
</div> 

JS:

$(document).ready(function() { 
    $(".tckt-tab").click(function() { //when click on flip radio button 
     if ($(this) == $(this).find('input:radio').prop('checked', false)) { 
      $(this).find('input:radio').prop('checked', true); 
     } 
    }); 

    $(".tckt-tab").click(function() { //when click on flip radio button 
     if ($(this) == $(this).find('input:radio').prop('checked', true)) { 
      $(this).find('input:radio').prop('checked', false); 
     } 
    }); 
}); 

Answer 1

Кнопка радио должна иметь такое же имя, если вы хотите только один из них, чтобы быть доступный

Пример:

<input type="radio" name="someCoolName" value="one">one 
    <input type="radio" name="someCoolName" value="two">two 
    <input type="radio" name="someCoolName" value="three">three 

Answer 2

Вы должны назначить одно имя для всех радио button.After присвоить то же имя только один вариант может быть choose-

изменить следующие вещи в вашем HTML файл-

<input type="radio" name="radio_name" value="one">one 
<input type="radio" name="radio_name" value="two">two 
<input type="radio" name="radio_name" value="three">three 

Answer 3

Радио Названия кнопок должны be same. Вот обновленный код

<div class="grid-100"> 
    <div class="tckt-tab active"> 
     <input type="radio" name="one" value="one">one</div> 
</div> 
<div class="grid-100"> 
    <div class="tckt-tab"> 
     <input type="radio" name="one" value="two">two</div> 
</div> 
<div class="grid-100"> 
    <div class="tckt-tab"> 
     <input type="radio" name="one" value="three">three</div> 
    </div> 

Answer 4

Надеюсь, что они вам полезны.

$(document).ready(function() { 
 
    $(".tckt-tab").click(function() { //when click on flip radio button 
 

 
     if (!$(this).find('input:radio').prop('checked')) { 
 

 
      $(this).find('input:radio').prop('checked', true); 
 
     } else { 
 
      $(this).find('input:radio').prop('checked', false); 
 
     } 
 
    }); 
 
});

.tckt-tab{ 
 
    padding: 10px 10px; 
 
    background-color: gray; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="grid-100"> 
 
    <div class="tckt-tab active"> 
 
     <input type="radio" name="yourColumnname" value="one">one 
 
    </div> 
 
</div> 
 
<div class="grid-100"> 
 
    <div class="tckt-tab"> 
 
     <input type="radio" name="yourColumnname" value="two">two 
 
    </div> 
 
</div> 
 
<div class="grid-100"> 
 
    <div class="tckt-tab"> 
 
     <input type="radio" name="yourColumnname" value="three">three 
 
    </div> 
 
</div>