一次选择一个单选按钮

Question

I want to select one option at a time from three options.

At the moment I can select radio on click on div but it I want only one to be select from list so it should toggle.

Check my fiddle here : 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

The radio buttons must have a same name, if you want only one of them to be avaliable

Example:

   <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

You should assign same name for all radio button.After assign same name only one option can be choose-

change following thing in your html file-

<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

Radio Button names must be same .Here's the updated code

  <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

Hope that these are useful to you.

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

Answer 5

---

Option 1 Correct Answer

---

$(document).on("click", ".radioBtn", function (e) {

    $('input:radio').prop('checked', false);

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

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