We Keep Coding

How to force radio buttons to remain checked when checking another radio buttons field?

Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !

Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !

jQuery autoselect radiobox is not working

I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)

Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example

I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);

Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

I am trying to setup two sets of radio buttons that will function simultaneously. In other words whenever Male is checked on the top, I would like Male at the bottom to be automatically checked. (and vice versa) If user scrolls down and clicks female then the one at the top should be checked. No matter which radio the user clicks both radio sets should always have the same value checked. Please advise on the most practical way to accomplish this. My main focus is Javascript or Jquery but I have spent several hours trying to come up with something to no avail. Please advise. Thanks! :)
<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>

Attach to the change event and selecting all other radio buttons which have the same beginning of the name and are of equal value but which are not the current one.
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.prop('checked', $(this).prop('checked'));
});
The above is not using any clever caching of the selectors which you can add yourself.
Basically, whenever a radio button changes it's checked value the code will select all other radio buttons with the same value (male/female) which also start with the same name (sex????) and set their checked property to the same value as the current one.
I hope this makes sense. See a working demo below.
DEMO - Changing radio buttons in a set.
Edit
I just noticed.. I am using jquery 1.3.2 and upgrading isnt an option
at the moment. You don't happen to have a 1.3.2 alternative do you?
For jQuery version 1.3.2 use the attr method instead of the prop method:
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.attr('checked', $(this).attr('checked'));
});
DEMO - Changing radio buttons in a set using jQuery 1.3.2.

Just add an onclick listener to both sets. Like this:
document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;
function clickMale(){
document.getElementById("male1").checked=true;
document.getElementById("male2").checked=true;
}
function clickFemale(){
document.getElementById("female1").checked=true;
document.getElementById("female2").checked=true;
}
And add IDs to the radio buttons ("male1", "male2", "female1", "female2")

Since you mentioned it, Zove's answer in jQuery would be something like this, if you prefer:
$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);
function clickMale(){
$("#male1").attr('checked', true);
$("#male1").attr('checked', true);
}
function clickFemale(){
$("#female1").attr('checked', true);
$("#female2").attr('checked', true);
}
You don't need jQuery for something this simple, but if you're using it elsewhere, it's best to be consistent.

It might make sense, to share a class for both male / female inputs, e.g. 'js-male' or 'js-female'). This saves some code. for instance you could do:
$('.js-male').change(function() {
$('.js-male').attr('checked', $(this).attr('checked'));
});
$('.js-female').change(function() {
$('.js-female').attr('checked', $(this).attr('checked'));
});
There might be more elegant ways to deal with the whole situation so. Do you really want the inputs to have different names ('male', 'male2'), which means that your server receives two different params? If you give both radio button groups the same names, only the value of the last one will be sent to the server, anyway, if you mirror the radio buttons anyway, this doesn't really matter.
Demo

Just change the location of your jQuery source and this will work right out of the box.
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#male1, #male2").live("click", function(){
$("#male1").attr("checked", $("#male2").attr("checked"));
$("#male2").attr("checked", $("#male1").attr("checked"));
});
$("#female1, #female2").live("click", function(){
$("#female1").attr("checked", $("#female2").attr("checked"));
$("#female2").attr("checked", $("#female1").attr("checked"));
});
});
</script>
</head>
<body>
<div class="top">
<input id="male1" type="radio" name="sex" value="Male" /> Male<br />
<input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input id="male2" type="radio" name="sex2" value="Male" /> Male<br />
<input id="female2" type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
</body>
</html>

How to change the radio button selection in IE 7?

I am using Knockout javascript library, and I run into this problem: I am unable to change the radio button selection in IE7.
For example, on my page, I am unable to change the radio button selection using IE 7 the way the controlTypes example does it.
Is there a fix to this problem?

I've found the solution. By adding the name attribute with same value (name="planetType", see below) for all the radio buttons in the group, IE will also be happy...
<label><input type="radio" value="all" data-bind="checked: typeToShow" name="planetType" />All</label>
<label><input type="radio" value="rock" data-bind="checked: typeToShow" name="planetType"/>Rocky planets</label>
<label><input type="radio" value="gasgiant" data-bind="checked: typeToShow" name="planetType"/>Gas giants</label>

Why am I submitting the form twice? jQuery submit() with radio button

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego

You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});

You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.