We Keep Coding

Only setting the "checked" value of selected radio button while removing the attribute for other buttons

I am going out of my mind and cannot seem to figure out the logic here.
I have 4 Radio buttons
(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
When the user selects the second button I want the markup to perform as such:
I have 4 Radio buttons
( ) <input type="radio" name="radioGroup">
(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
I have tried various forms of click events to set the now unselected box to not have the checked attribute.
I have it so it sets the box attribute to checked but it isn't deselecting the now unchecked button
http://jsfiddle.net/Dnd2L/27/

I believe the checked attribute is used for a default value. Radio buttons are evaluated on the form submit. You may have more luck using onclick.
Example:
<input type="radio" id="rdo1" name="rdoTest" onclick="ChangeStatus();" />
<script>
function ChangeStatus()
{
$('#rdo1').prop('checked', true);
}
<script>
You handle true/false attributes differently in jquery

Among a group of radiobuttons, only one can be checked. This means you don't have to "uncheck" it manually, the browser does it for you.
If you modify the code at http://jsfiddle.net/Dnd2L/35/ and remove/comment out this line: $("input:radio").removeAttr('checked');, the buttons will show correctly which one is checked.

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!

Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice

Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->

javasscript radio button not working?

I am adding attribute for input type radio as checked="checked", in view source it shows but not reflecting in the browser.
edit
<input type="radio" name="status" value="Yes" checked="checked"/>
<input type="radio" name="status" value="No" />
When is check in firebug it shows checked="checked" as shown above, but browser still has no buttons checked.
What might be the cause??
Thanks

The checked attribute sets the default checked state, not the current state.
Set the checked DOM property to true or false instead.
document.getElementById('for_example').checked = true;

Radio Button Control in jquery

I'm new to Web development and jQuery.
I'm trying to build an ASPX page with two RadioButton controls that must perform the following actions:
On page load, one of the two must be selected depending on a flag from an object on the ASPX page. Lets call it customer.Id. If the Id is true, select RadioButton one must be set else select RadioButton 2 must be set.
At any point after page load the user selects a RadioButton, the other must be deselected.
When RadioButton two is clicked, hide a Table named "employee table" and when RadioButton one is clicked, show that Table.
Can anyone please tell me how I can get this functionality in jQuery functions?

Not sure about .NET but in Classic ASP you would write a variable like this <%=customerID%>.
In jQuery, I think you can do something like this:
<input type="radio" id="radio1"> Yes
<input type="radio" id="radio2"> No
<table border="1" id="employeeTable">
<tr><td>This is the table</td></tr>
</table>
... and then some jQuery:
$(document).ready(function() {
var customerID = <%=customerID%> // asp variable
if (customerID != "") {
$('#radio1').prop('checked', 'checked');
} else {
$('#radio2').prop('checked', 'checked');
}
$('#radio1').click(function() {
$('#employeeTable').fadeIn('fast');
})
$('#radio2').click(function() {
$('#employeeTable').fadeOut('fast');
})
})
You can have a look/play here: http://jsfiddle.net/qcLtX/7/
Try changing the customerID value to nothing, like var customerID = "".
Good luck
UPDATE
Where I have used .prop: If you are using jQuery version 1.6 or greater, you should use .prop, otherwise, use .attr.

Radio buttons are grouped by their name attribute, like so (source).
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
If the radio buttons are grouped, then selecting any one of them automatically delselects all the others in that group.
So the buttons cannot have a distinct name. If you want to distinguish between radio buttons (without referring the their value), you should add an id.
<input type="radio" name="sex" id="m" value="male" />
You can set the selected radio button on page load declaratively in markup, or using jquery.
Declarative version:
<input type="radio" checked="checked" name="sex" value="male" />
jQuery:
$(document).ready(function(){
$("#m").attr("checked", "checked");
});

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>