We Keep Coding

Targeting a span that is wrapped around a radio input

My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.

jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");

$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1

How to get the value of selected radio button in javascript/jquery

Here is the html part:
<input class="demo" radio-value="yes" name="Radios" id="sample1" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample2" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample3" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample4" value="" type="radio">
How can I know which radio button the user is selected and how can I know the value of selected radio button.
I want to get the "radio-value" of the selected button. Because, I will be using value for json input..
How can I do that??

First of all, all of your radio buttons have the same id - this is illegal and can cause unexpected behavior. Provided this is fixed, you can do something like this:
var selectedValue = $("input.demo:checked").val();
and for radio-value:
var selectedRadioValue = $("input.demo:checked").attr("radio-value");

Use :selected with class selector to get the selected radio button. You should give unique ids to html elements. Also the value of all the radio button is empty string you may need to assign some values to them
$('.demo:selected').val();

$('.demo:selected').val(); // class is demo
This would do the trick!
But you need to remove the id that is similar among all the elements. You should change their value such as sample1, sample2 etc. Then you can get the value, and the id.

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

onchange select radio isn't checked

<input type="radio" name="radiobutton" id="1_1 value="1. Жетоны" "/>
<select id="1_1" onchange="document.GetElementById(this.id).checked=true;">
How come when I change option of select, radio isn't checked?
Thanks for carefuly!
But there is something else wrong, because it does not work too:
<input type="radio" name="radiobutton" id="1_1" value="1. Жетоны" "/>
<select name="1_1" onchange="document.GetElementById(this.name).checked=true;">
Thanks to shashi!

There are two things wrong:
- Your input tag is invalid HTML - it's missing a closing double-quote on the id attribute's value, and you have an out-of-place double-quote at the end of the tag.
- It looks like you're trying to use the same id for both the input and select tag. You can't do that; their ids must be different.

Replace,
document.GetElementById(this.id) with document.getElementById(this.id);
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

Element IDs must be unique in a page, however element names can be repeated. Also, form controls must have a name to be successful (i.e. be submitted to the server).
So you can fix the problem by using references to form controls (and fixing the markup):
<form>
<input type="radio" name="radiobutton" id="1_1" value="1.blah">
<select name="whatever" id="1_1" onchange="this.form.radiobutton.checked=true;">
<option>0
<option>1
</select>
<input type="reset">
</form>
Note that you need a reset button, otherwise it's impossible to uncheck the radio button without reloading the page (or the user running a script).

Refreshing input:radio from iframe using Jquery Mobile

I'm trying to change the selected option of an input:radio (that is in the main page) dynamically clicking a button inside an iframe.
To do this, y pass by parameter the variable containing the input:radio element:
//code from iframe.js
button.live("click", function(e) {
var inputRadioContainer = $(window.parent.document).find('#inputRadioContainer');
changeInputRadio(inputRadioContainer, "email");
});
//code from mainPage.js
function changeInputRadio(inputRadioContainer, val){
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).checkboxradio('refresh');
}
//HTML content of inputRadioContainer
<ul id="inputRadioContainer" data-role="listview">
<li>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" data-mini="true">
<input type="radio" name="radio-contacto" id="radio-contacto-1" value="email"/>
<label for="radio-contacto-1" value="email">email</label>
<input type="radio" name="radio-contacto" id="radio-contacto-2" value="tlf"/>
<label for="radio-contacto-2" value="tlf">telf</label>
</fieldset>
</li>
</ul>
After executing that code, the "checked" attribute of the required radio is setted to "checked" (as expected), but the radio is not displayed checked. It seems that ".checkboxradio('refresh');" is not working. I also tried doing "inputRadioContainer.listview('refresh')" but it doesn't work.
Anyone knows how to solve the problem?
Thank you very much!!

Solution:
Using
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).trigger('click');
instead of
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).checkboxradio('refresh');
I hope helping someone