Develop Reference

Setting a radio button to checked in jquery not showing it as checked in view

On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House

It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);

It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.

$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.

Checkbox appear when certain radio selected

<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?

Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}

HTML form with input radio and one text input with the same attribute name

I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other".
Something like this:
I want to do it so when submitted, the url called is
app://configuration?server=...
server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group
I tried to do this
<form method="GET" action="app://configuration">
Select server <br>
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" value="">Other <input type="text" name="server" />
<input type="submit" value="Submit">
</form>
I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.
I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)
I have no access to change the server code so I can't use a different attribute name because the server will not know it...

Try this pure javascript (modified your html code)
function changeradioother() {
var other = document.getElementById("other");
other.value = document.getElementById("inputother").value;
}
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">
I added an id to the last radio button and the inputbox.

You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.
Other <input type="text" name="serverCustom" />
Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.
If you wish to use pure javascript to check the values, and send the data you require use this:
http://jsfiddle.net/Lord_Zero/w5x4h/

Is this what you are trying to do?
Fiddle: fiddle
function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
var serverValue;
if(curRadio==4)
{
serverValue=document.getElementById("other").value;
}
else
{
serverValue=curRadio;
}
alert(serverValue);
}

How to get the value of selected radio button

My HTML part is below:
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio">
<label checked="checked" class="switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio">
<label class="switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
When I click each button checked="checked" and selected options will be changing from yes to no labels.
With these options, how can I get the save-value of selected radio button. Since, am using Handlebars js (json) on my value option I want to get the save-value of selected radio button.
How an I do that?

Assuming the class switch-input is assigned to only these two input elements, you can use it along with the checked selector
var value = $('input.switch-input').filter(':checked').attr('save-value');
//or var value = $('input.switch-input:checked').attr('save-value');
Note: Prefer to use data-* attributes to store custom attributes
I think the radio buttons are not actually getting checked, only the labels attributes are changed so, add a additional class to the labels like myclass
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio"/>
<label checked="checked" class="myclass switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio"/>
<label class="myclass switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
then
var value = $('.myclass[checked="checked"]').prev('input').attr('save-value');
console.log(value)

First, your radio buttons should have the same name attribute, say view, so that the browser will restrict selection to only one of them. Then, you can use $('[name="view"]:checked').val() to capture the value of the radio button that is selected.

You have some errors in your HTML code, you put the checked attribute on the wrong tag, look in this example:
$('body').on('change','input',function() {
$('.switch-selection').html($(this).attr('save-value'));
});
http://jsfiddle.net/9Pj3g/2/

how to select a radio button by clicking on an option and not the actual button itself

say i have the following three options and each with a radio button beside
London
Newyork
Dubai
I need jQuery that when the user clicks on the word the radio button selects!

This is a built-in feature in HTML, so no need for JavaScript. Simply use the label tag like this:
<label><input type="radio"> London</label>
<label><input type="radio"> New York</label>
<label><input type="radio"> Dubai</label>

Two ways:
<label for="london"><input type="radio" id="london"> London</label>.
Use label's for attribute similar to radio's id.
<label><input type="radio" > London</label>
Place the radio within label.
Very basic HTML.

You can use the label tag:
<input id="emptyacct" type="radio" name="account" value="radiobutton" />
<label for="emptyacct">Yes </label>

It's just HTML ;)
<input id="input_london" type="radio" name="london" value="radiobutton" />
<label for="input_london">London</label>
<input id="input_ny" type="radio" name="ny" value="radiobutton" />
<label for="input_ny">New York</label>
...