一次选择一个单选按钮

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

单选按钮必须具有相同的名称，如果你想只是其中之一是avaliable

实施例：

<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

单选按钮名称必须这里的更新代码

<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>