1

I have 6 forms and each form has 2 radio buttons.

I want the user experience to be, that they can only select 1 radio button at a time. So when they traverse over into another form and check a radio button. all other radio buttons will deselect.

This is what I have so far in my attemps.

$(document).ready(function () {                 
  $('input[type=radio]').prop('checked', false);

  $('input[type=radio]').each(function (i) {                        
    $(this).not($('radio:checked')).prop('checked', false);                     
  });                   
});

my idea has been to deselect all buttons at the start. but after that i'm confused in my logic.

I want to say

if this radio is check, uncheck all other radios.

while in english it fits in one sentence, how can i get it into jquery?

Danil Speransky
  • 29,891
  • 5
  • 68
  • 79
Eli
  • 4,329
  • 6
  • 53
  • 78

3 Answers3

5
$('input[type=radio]').on('change', function(){
    $('input[type=radio]').not(this).prop('checked', false);
});

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • +1 This is correct. Just wondering what will the user do if he changes his mind and want to select another radio? :) – Zoltan Toth Jul 27 '12 at 22:19
  • well this works, if the user selects a button and changes his or her mind then they can still select another button. The forms are on the same page but each set of buttons submits to a specific paypal form – Eli Jul 27 '12 at 22:20
1

Essentially you can't "unclick" a radio button - so all you have to do is on the "click" event, unselect all radio elements and select the one that was clicked. 

$('input[type=radio]').on('click',function(e){
   $('input[type=radio]').prop('checked','');
   $(this).prop('checked','checked');
   e.preventDefault();
});

jsFiddle

Lix
  • 47,311
  • 12
  • 103
  • 131
0

Try this (see Demo: http://jsfiddle.net/3xD7V/1/):

$(document).ready(function () {
  $('input[type=radio]').prop('checked', false);
  $('input[type=radio]:first').prop('checked', true)

  $('input[type=radio]').click(function (event) {
    $('input[type=radio]').prop('checked', false);
    $(this).prop('checked', true);

    event.preventDefault();
  });
});
Danil Speransky
  • 29,891
  • 5
  • 68
  • 79