Change label text based on the radio button selection - php

Question

I want to change the label text based on the selection of the radio button. Could you please help me to do it easily. Here is my code.
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
This is the label that i want to change the text
<div class="control-group " >
<label class="control-label" id="labelName">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="">
</div>
</div>
</div>
<div class="control-group ">
<label class="control-label" id="labelNum">NIC</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="regNum" name="regNum" placeholder="">
</div>
</div>
</div>
This is my javascript
<script type="text/javascript">
$(document).ready(function()
{
if (($('input[name=btype]:radio:checked').val())=="business")
{
document.getElementById("labelName").innerHTML="Company Name";
document.getElementById("labelNum").innerHTML="Reg No.";
}
}
);
</script>

Answer 1

I rewrote the code for you in a better way. When you have jQuery use it to the best. Don't get messed up by handling JavaScript. jQuery is there to do it for you.
<script type="text/javascript">
$(document).ready(function()
{
if ($('#business').is(':checked'))
{
$('#labelName').text("Company Name");
$('#labelNum').text("Reg No.");
}
}
);
</script>

Answer 2

youre mixing jquery in with your js, so heres jquery
<script type="text/javascript">
$(document).ready(function(){
$('input[name=btype]:radio:checked').click(function(e){
if($(e.currentTarget).val()==='business') {
$("#labelName").text("Company Name");
$("#labelNum").text("Reg No.");
}
});
});
</script>

Answer 3

JsFiddle
onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"

Answer 4

You can achieve this by adding a change listener to that inputs and getting the value of the selected one
I have added some HTML5 attributes to avoid getting more DOM
please look at data-text
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" data-text="private" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" data-text="Business Advertiser" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
Here is your JS and its jQuery
$(document).ready(function(){
$('input[name="btype[]"]').change(function(){
alert($(this).data('text'));
});
});
You can add more than data-* attributes like price or whatever you want and getting the value of it by using $(this).data('*');
It's used like this to make your HTML valid and I used it to avoid getting parent text
Check this fiddle http://jsfiddle.net/gK6bU/1/
I hope this can help :)