I am trying to copy all input values of a div to another div with the same exact inputs, based on a checkbox press.
This is my HTML Form:
<div id="0">Name*
<input type="textbox" name="name0" required/>Sex*
<input type="radio" name="sex0" value="M" required/>M
<input type="radio" name="sex0" value="F" required/>F
<br>Location
<input type="textbox" name="location0" />Age
<input type="textbox" name="age0" size="2">
<br>Ethnicity
<input type="textbox" name="ethnicity0">
</div>
<input type="checkbox" class="copy" name="copy1" value="1" />Check to copy below
<br>
<div id="1">Name*
<input type="textbox" name="name1" required/>Sex*
<input type="radio" name="sex1" value="M" required/>M
<input type="radio" name="sex1" value="F" required/>F
<br>Location
<input type="textbox" name="location1" />Age
<input type="textbox" name="age1" size="2">
<br>Ethnicity
<input type="textbox" name="ethnicity1">
</div>
This is my Javascript:
$(document).ready(function () {
$('input[type="checkbox"]').change(function() {
var whichDiv = this.value;
var divFrom= $("#"+(whichDiv-1)).children();
var divTo = $("#"+whichDiv).children();
if(this.checked) {
//COPY previous elements
for (var i = 0; i < divFrom.length; i++) {
var tableChild = divFrom[i];
var tableChildTo = divTo[i];
tableChildTo.value = tableChild.value;
}
}
else {
for (var p = 0; p<divTo.length; p++){
$(divTo[p]).val('');
}
}
});
});
The tableChildTo.value works for copying the value of textboxes but not the radio button for M or F. How would I do this?
Using Jquery 1.11.1