I think I may have found a bug I can't work around.
JSfiddle
I have an HTML dropdown with some html5 data. On change the jquery should find the selected option and pull the data from that option, then check some boxes.
I don't know how else to explain it except goto the jsfiddle and try it. The first option should check the first half of boxes and the second option should select all the checkboxes.
I hope someone here can tell me what I'm doing wrong. Be sure to change the select box 3-4 for interesting behavior.
Best,
Ryan
HTML
<h2>Features</h2>
<div class="form-group">
<div class="col-md-12 required">
<label for="feature_groups">Feature Group(Quick Select)</label>
<select name="feature_groups" class="form-control" id="feature_groups">
<option value="">Select One</option>
<option data-group='3,4,7,8'>2reg</option>
<option data-group='1,2,3,4,5,6,7,8'>fg1</option>
</select>
</div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
<label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
<label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
<label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
<label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
<label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
<label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
<label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
<label for="Feature5FeatureId">Premium Rims</label>
</div>
JS
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').attr('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
}
}
});
});
It is the same old attr() vs prop() issue....
Use .prop() to set the checked state instead of .attr()
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').prop('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
}
}
});
});
Demo: Fiddle
Related
Message sending form, the customer has to select at least one of the alternatives (mail, SMS).
Send button would be disabled if none is selected and activate if one or both selected
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", "disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The issue is because your current logic does not deal with checkboxes being re-checked.
You can solve the problem by inverting the logic so that the disabled property is updated on every checkbox change, and is determined by the length of the checked boxes:
var $checkboxes = $('.form-check-input').change(function() {
$('#send').prop('disabled', function() {
return $checkboxes.filter(':checked').length == 0;
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can do it like this:
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
This will disable the button if none of the checkbox are checked.
Demo
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">
E-post
</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">
SMS
</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
You never enable the button again. There is just a disable instruction.
I would disable it by default at beginning and then enable it if any of the checkboxes is checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").attr("disabled", "disabled");
$(this).each(function() {
if ($(this).is(':checked')) {
$("#send").removeAttr("disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('.form-check-input').change(function() {
let hasChecked = false;
$('.form-check-input').each(function() {
if ($(this).is(':checked')) {
hasChecked = true;
}
});
$("#send").attr("disabled", !hasChecked);
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Correct your logic. Once disabled you are not enabling again when checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", true);
}else{
$("#send").attr("disabled", false);
}
});
});
});
Blockquote
I am using a jquery plugin called magic-check, to create styled checkboxes. The checkboxes are displayed using the following example code:
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
I am having issues creating a select all button. I think the css on magic-check hides the checkbox and styles the label. I have tried numerous methods to solve, but no luck.
In pure javaScript you can write:
document.querySelectorAll('.magic-checkbox[type="checkbox"]').forEach(function(ele, idx) {
ele.setAttribute('checked', 'checked');
});
Instead, in jQuery you can write:
$(':checkbox.magic-checkbox').prop('checked', 'checked');
An example:
$('#selectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', 'checked');
});
$('#unSelectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/forsigner/magic-check/master/css/magic-check.min.css">
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
<label for="2">Checked</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
<label for="3">
Disabled
</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
<label for="4">Checked && Disabled</label>
</div>
<div>
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
</div>
<br>
<br>
<button type="button" id="selectall">Select all checkboxes</button>
<button type="button" id="unSelectall">Unselect all checkboxes</button>
The first solution will scan your page for labels and check the corresponding input with a matching id. The second and third solutions are just efficient ways of checking all your check boxes on the page.
$('#check-all').on('click', function(){
$('label').each( function() {
var target = $(this).attr('for');
$('input[id="' + target + '"]').prop('checked', true);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with Vanilla JS.
var inputs = document.getElementsByTagName('input');
var button = document.getElementById('check-all');
button.addEventListener('click', function(){
for ( var input in inputs ) {
inputs[input].checked = true;
}
})
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with jQuery.
$('#check-all').on('click', function(){
$('input').each( function() {
this.checked = true;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">1</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
I have following 32 checkbox with 32 input field. Initially each input field is hidden. I want to show each input field when the corresponding checkbox is clicked. If the checkbox is unchecked then input field will be hidden.
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
I can hide the input field when page is load but can't get the idea what is the jQuery code to show/hide input field when checkbox is checked / unchecked.
jQuery Code :
$(document).ready(function () {
$('.ch_for').hide();
)};
You could use on click event with .toggle() to show/hide related input like :
$('.ch_for').hide();
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
To avoid the use of $('.ch_for').hide(); you could assign a class to all the input to hide them by default (hide for example), then toggle this class on click :
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggleClass('hide');
})
Hope this helps.
$(document).ready(function () {
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch01">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch03">CH03</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch04">CH04</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
HTML:
<div class="container">
<input type="checkbox" id="100" value="100" />
<div class='area100 hidden'>
<input></input>
</div>
<br />
<input type="checkbox" id="101" value="101" />
<div class='area101 hidden'>
<input></input>
</div>
<br />
</div>
JavaScript:
$(".container :checkbox").click(function () {
var testVar = ".area" + this.value;
if (this.checked) $(testVar).show();
else $(testVar).hide();
});
Here is a working JSFiddle example.
You can use:
change event
closest to get the related label
next to get the text box
toggle
trigger to initialize
The snippet:
$('.checkbox :checkbox').on('change', function(e) {
$(this).closest('label').next(':text').toggle(this.checked);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch01">CH01</label>
<input type="text" name="ch_for[1]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch03">CH02</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch04">CH04</label>
<input type="text" name="ch_for[4]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
Try this :
<div class="checkbox form-inline">
<label><input type="checkbox" id = "CB1" name="ch_name[]"
value="ch02">CH02</label>
<input id = "IP1"type="text" name="ch_for[]" value="" placeholder="Channel
details" class="form-control ch_for">
</div>
$('#CB1').click(function() {
$('#IP1')[this.checked ? "show" : "hide"]();
});
Working Demo:
http://jsfiddle.net/GBSZ8/678/
$(document).ready(function() {
$('.ch_for').hide();
$('.checkbox').each(function() {
var $checkbox = $(this);
$checkbox.find('input[type="checkbox"]').change(function() {
var $input = $checkbox.find('input[type="text"]');
$(this).is(":checked") ? $input.show() : $input.hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
Assuming your HTML is like the following with other checkboxes:
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch03">CH03</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
......
jQuery: We can use toggle();
jQuery(document).ready(function($){
$('.ch_for').hide(); //Also we can initially hide it using CSS;
$('div.checkbox input[type="checkbox"]').change(function(){
$('.ch_for',this.parentNode.parentNode).toggle( $(this).is(':checked') );
}).trigger('change');
});
Here is the working sample: http://jsfiddle.net/kkpu0s5r/
$('input[type="checkbox"]').click(function(){
if($(this).is(':checked')){
$('.ch_for').hide();
}else{
$('.ch_for').show();
}
});
I have 5 teachers names and corresponding checkboxes(5) I am using checkall function to check all check boxes.
now I want ,when I uncheck a checkbox now enable a textbox at right side.
how to create a textbox from unchecked function using javascript?
my code is :
HTML + PHP :
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group{{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">{{$teacher->tname}}:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
JAVASCRIPT :
$("#checkFull").click(function() {
$(".check").prop('checked', $(this).prop('checked'));
});
what is the javascript code to enable textbox?
function changeTextBoxFormCheckBox($elm){
var $textBox= $elm.closest(".form-group").find("input[type='text']");
if($elm.is(":checked")){
$textBox.attr("disabled",true);
}else{
$textBox.attr("disabled",false);
}
}
$(".checkbox").each(function(){
changeTextBoxFormCheckBox($(this));
})
$("#checkFull").click(function () {
var checkAllProp= $(this).prop('checked');
$(".checkbox").each(function(){
var $this=$(this);
$this.prop('checked', checkAllProp);
changeTextBoxFormCheckBox($(this));
})
});
$(".checkbox").click(function () {
changeTextBoxFormCheckBox($(this));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group {{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">tname:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control checkbox">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
Format your html code as I mentioned. You can do change as per your need
$(document).on('change', '[type=checkbox]', function() {
if ($(this).is(":checked")) {
$("#textBox1").attr("disabled", "disabled");
} else {
$("#textBox1").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" class="teacherCheck" name="teacherCheckName1" type="checkbox" value="1" class="check form-control">
<input id="teacherCheck_2" class="teacherCheck" name="teacherCheckName2" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" id="textBox1">
</div>
</div>
$(document).on('change', '[type=checkbox]', function() {
var val = $(this).data('value');
if ($(this).is(":checked")) {
$("#textBox"+val).attr("disabled", "disabled");
} else {
$("#textBox"+val).removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" data-value="1" name="teacherCheckName1" type="checkbox" class="check form-control">
<input type="text" id="textBox1">
<input id="teacherCheck_2" data-value="2" class="teacherCheck" name="teacherCheckName2" type="checkbox" class="check form-control">
<input type="text" id="textBox2">
</div>
</div>
I have the following HTML
<div class="form-radios" id="edit-submitted-lunchset-lunch"><div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="1" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-1"> <label for="edit-submitted-lunchset-lunch-1" class="option">12:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="2" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-2"> <label for="edit-submitted-lunchset-lunch-2" class="option">12:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="3" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-3"> <label for="edit-submitted-lunchset-lunch-3" class="option">13:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="4" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-4"> <label for="edit-submitted-lunchset-lunch-4" class="option">13:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="5" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-5"> <label for="edit-submitted-lunchset-lunch-5" class="option">14:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" checked="checked" value="6" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-6"> <label for="edit-submitted-lunchset-lunch-6" class="option">14:30 </label>
</div>
</div>
I am trying to retrieve the label associated with the radio button instead of the value using the following javascript but the variable "chosentime" is still "unassigned". I checked my code by throwing in a few alerts the alert(radios[i].innerhtml); throws unassigned
var radios = document.getElementsByName('submitted[lunchset][lunch]');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(i);
alert(radios[i].value);
alert(radios[i].innerhtml);
chosentime = radios[i].innerhtml;
}
}
window.alert(chosentime);
}
Would appreciate any help. Thanks in advance.
You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' for attribute is equal to its option's id, you can get to the label easily:
for(var i=0; i<radios.length; i++) {
var selector = 'label[for=' + radios[i].id + ']';
var label = document.querySelector(selector);
var text = label.innerHTML;
// do stuff
}
Also check out this fiddle
Using modern Javascript and CSS this is easy now.
input.labels
Give your button an id, and then give the label a for='id' making sure it is the same id as the button.
Buttons can have multiple labels so it returns a NodeList, if you only have 1 label, just take the first item in the list.
radioButtonClicked.labels[0];
Docs here.
Here is an example of how you would setup the HTML:
<div class="controls">
<input type="radio" name="select" id="large" class="radioButtons" checked>
<input type="radio" name="select" id="medium" class="radioButtons">
<input type="radio" name="select" id="small" class="radioButtons">
<input type="radio" name="select" id="tiny" class="radioButtons">
<label for="large" class="option option-1 checked">
<span class="optionLabel">Large</span>
</label>
<label for="medium" class="option option-2">
<span class="optionLabel">Medium</span>
</label>
<label for="small" class="option option-3">
<span class="optionLabel">Small</span>
</label>
<label for="tiny" class="option option-4">
<span class="optionLabel">Tiny</span>
</label>
</div>
A radiobutton have no innerhtml. You need to target the label. If it's always directly after the radio-button, try something like radios[i].nextSibling.innerhtml.