Develop Reference

How to get the ID value while the radio button is checked in Shopify?

I have a radio button group and one input field. What I want is when the radio button property is CHECKED the below ID gets their value. I tried something which is wrong.
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="text" id="{%if radio.checked='checked'%} Account {%endif%}" class="">

I think you need input box value as selected radio button value. if you change the id of input control then HTML page will have 2 controls with same id. If you want input control value to show selected radio value then use below code.
<script language="javascript">
function onCheck(isChecked, value){
document.getElementById('displaySelRad').value = value
}
</script>
<input type="radio" id="male" name="gender" value="male" checked onclick="onCheck(this.checked, this.value)">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" onclick="onCheck(this.checked, this.value)">
<label for="female">Female</label><br>
<input type="text" id="displaySelRad" class="">

Using javascript to check a radio button by it's value

There is 3 radio buttons on a website, and I want to use javascript to check the radio button that says "female". How would I do that?
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
document.getElementsByValue("female").checked = true;

With document.querySelector("input[value='female']" you can select it with the value.
document.querySelector("input[value='female']").click()
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

You can get value by binding this to function and accessing the boolean value with .checked and .name which value is checked
function radionButtonChecked(e) {
console.log(e.checked, " ",e.value);
}
<input type="radio" name="gender" value="male" onclick="radionButtonChecked(this)"> Male<br>
<input type="radio" name="gender" value="female" onclick="radionButtonChecked(this)"> Female<br>
<input type="radio" name="gender" value="other" onclick="radionButtonChecked(this)"> Other

getElementById with Radio Button not working

How to get radio button value in javascript using onChange?
Here's my HTML:
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>

You need to define an actual function for call back:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="checkGender()" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>

Your JavaScript is executed once, when the page loads. You need to call it when something changes (based on an event), and react to the change.
HTML:
<div class="radio">
<label>
<input type="radio" name="gender" onclick="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onclick="checkGender()" id="female" value="Female">
Female
</label>
</div>
JS:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}

Add an event handler to the container (.radio) using Element.addEventListener(). When the handler is triggered check if the event target is a radio button using Element.matches(). If is is and radio button update the value of the #gender1 div:
var radio = document.querySelector('.radio');
var gender2 = document.getElementById('gender2');
radio.addEventListener('change', function(e) {
if(!e.target.matches('input[type=radio]')) return;
gender2.innerText = e.target.value;
});
<div class="radio">
<label>
<input type="radio" name="gender" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
<div id="gender2"></div>

You can add an event listener on radio buttons and check for the values.
var radios = document.querySelectorAll('input[type=radio]');
var genderEl = document.getElementById("gender");
for(var i=0; i< radios.length; i++)
{
radios[i].addEventListener("click", function(){
genderEl.innerHTML = this.value
})
}
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" id="female" value="Female">
Female
</label>
<h3 id="gender"></h3>
</div>
Note: You should always use eventlisteners rather than using inline event handlers. Inline event handlers are evaluated as eval. Moreover, it's a bad practice

Radio button is not getting checked in angular 2

I have created two radio button for gender, I want to display radio button checked that was previously selected.
I have added below code in Template
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
</div>
</div>
I have added below code in Component.
console.log(this.gender); // I am getting 'male' here.
this.editProfile = new FormGroup({
gender: new FormControl(this.gender || null)
});
Other value of the form is getting displayed but radio button is not getting checked.

You can write it like
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
{{form.value|json}}
</form>
It should work for you
Find a PLUNK here

I have found other solution. We can use below code
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
</label>
</div>
</div>

As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" value="female"/> Female
</label>
</div>
</div>

Update price on two checkbox selection with javascript or jQuery

I need a way to show correct price for a product with selection options. Radio Box 1 has 4 products with different price ProductA=$10, ProductB=$20, ProductC=$30, ProductD=$40
Radio Box 2 has two options Male and Female
For female all products are always $10 regardless of Radio Box 1 selection. Price varies for men depending on product choice. I need to show price change dynamically with js.
http://jsfiddle.net/pe2gpp01/
<div><label class="product">Product</label>
<span>
<input name="category" type="radio" value="10">
<label>Product A</label>
<input name="category" type="radio" value="20">
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40">
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="">
<label>Male</label>
<input name="gender" type="radio" value="">
<label>Female</label>
</span></div>
<span>Price:</span>

DEMO
html
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
js
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});