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

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);
        }
    });
});

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/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);
        }
    });
});

• javascript
• jquery
• html
• css
• radio-button

• 1 Use same name for all jsfiddle/tusharj/wbgthtyb/1 – Tushar Commented Oct 12, 2015 at 7:36
• how about to go adding active class : ? jsfiddle/wbgthtyb/2 – Vinayak Commented Oct 12, 2015 at 7:38
• 1 How about noJS jsfiddle/tusharj/wbgthtyb/6 – Tushar Commented Oct 12, 2015 at 8:35

5 Answers 5

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

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

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>

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

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);
    }
});