We Keep Coding

only last radio button triggers checkCBfont() function

I have a group of radio buttons and two text fields. When a radio button is checked, its label and only its label is supposed to turn bold. However only the last one executes the onclick event, and this turns all the other labels bold in addition to its own, which it should not do. The other radio buttons do nothing when checked.
This is my form, which is in the body of the html document:
<form name="form1">
From Date: <input type=text name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type=text name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List
<br>
<input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar
<br>
<input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt
<br>
<input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching
<br>
<input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail
<br>
<input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List
<br>
</form>
and these are the functions that are supposed to respond to the onclick event, which are in separate sets of script tags in the head of the html document:
<script type="text/javascript">
function checkCBfont() {
var ckBx=document.getElementsByTagName('INPUT'); // -- get all the input elements in the document
var t='';
for (i=0; i < ckBx.length;i++) {
t=ckBx[i].getAttribute('type');
if(t!=null){t=t.toLowerCase();}
if (t=='checkbox'||t=='radio') { // -- get only those inputs that are checkboxes or radio buttons
togglefont(ckBx[i]); // -- if they're checked, make them bold, else make them normal
}
}
}
</script>
<script type="text/javascript">
function togglefont(cb) {
//...toggle the label on a checkbox from bold to not-bold and back, when checked...
if (cb.checked==true || cb.checked) {
cb.parentNode.style.fontWeight='bold';
}else{
cb.parentNode.style.fontWeight='normal';
}
}
</script>
I have tried several different approaches, including but not limited to using inspect element, try...catch, and google, but I cannot seem to locate the problem.
To reiterate, the problem is that the last radio button bolds all the labels in lieu of each radio button only bolding its own label when clicked/checked.
Can anyone offer any advice and/or suggestions?

The parent element of your radio inputs is the <form>-tag. Therefore, if you change the font weight of the parent element, all labels are changed. You have to include all labels inside another element, e.g.:
<form name="form1">
From Date: <input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br>
To Date: <input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked onclick="checkCBfont();">List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar" onclick="checkCBfont();">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt" onclick="checkCBfont();">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching" onclick="checkCBfont();">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail" onclick="checkCBfont();">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail" onclick="checkCBfont();">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly" onclick="checkCBfont();">Current/Future List </span>
<br>
</form>
The JavaScript part worked for me without problems.
Example here

You can do this with JQuery with a lot less code: https://jsfiddle.net/ezj1Lfbw/10/
HTML
<form name="form1">
From Date:
<input type="text" name="FromDate" id="FromDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select();" onblur="CheckDate(this)">
<br> To Date:
<input type="text" name="ToDate" id="ToDate" value="" maxlength=10 size=12 autocomplete="off" onFocus="this.select()" onblur="CheckDate(this)">
<br>
<input type="hidden" name="dvval" value="">
<br>
<span><input type="radio" class="radio" name="dateview" id="dvlist" value="list" checked>List</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcal" value="calendar">Calendar </span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvgantt" value="gantt">Gantt</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvds" value="dailyswitching">Daily Switching</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvdd" value="dailydetail">Daily Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvcd" value="currentdetail">Current/Future Detail</span>
<br>
<span><input type="radio" class="radio" name="dateview" id="dvco" value="currentonly">Current/Future List </span>
<br>
</form>
JQuery
$('span').click(function() {
$('span').removeClass('bold')
$(this).addClass('bold')
})
CSS
.bold {
font-weight: bold;
}

HTML radio input with (required) text option for "other"

I have a set of radio inputs with an option "other" that has a text field. My question is how I make the text field required when the other option is selected.
The code I came up with so far::
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="">Other
<input type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
</script>

try calling a function when other radio button is clicked to set input field to required :
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
function setRequired(){
document.getElementById("inputother").required=true;
}
function removeRequired(){
if(document.getElementById("inputother").required == true){
document.getElementById("inputother").required=false;
}
}
</script>
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1" onclick="removeRequired();">Option 1<br>
<input type="radio" name="option" value="2" onclick="removeRequired();">Option 2<br>
<input type="radio" name="option" value="3" onclick="removeRequired();">Option 3<br>
<input type="radio" name="option" value="" onclick="setRequired();" id="other">Other
<input id="inputother" type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>

There are many diff ways to this one is here
give id to your radio box which is other and give id to text box.
function changeradioother(){
if(document.getElementById("Other").checked ) {
if(document.getElementById("inputtext").value == ''){
alert('input required');
}
}
return false
}
<form method="POST" action="testPage.php" onsubmit="return changeradioother()">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="" id="Other">Other
<input type="text" name="othertext" id="inputtext" >
<input type="submit" value="Submit">
</form>

You can do something like that.
Going through all radio button to check which was clicked.
By the way, you did not put an id to the radio button Other.
var radio = document.querySelectorAll("input[name='option']");
for(var i = 0;i< radio.length;i++){
radio[i].onclick = function(){
if(this.id == "other"){
document.getElementById('otherText').setAttribute("required", true);
}else{
document.getElementById('otherText').removeAttribute("required");
}
}
}
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" id="other">Other
<input type="text" name="othertext" id="otherText">
<input type="submit" value="Submit">
</form>

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?

Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.

A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

How to check if all input (text, email, number and radio) of a div are checked?

Looking for a way to enable the submit button of a form when all its inputs are checked/not empty.
I have stumbled upon snippets in both google and other SO questions, where a similar thing is done, but always only for the same type of input, not considering different kinds as it's the case here. Any ideas how to do this?
Below, an example of where I would use such snippet and its link to http://jsfiddle.net/bRKuV/.
P.S Looking for a solution other than the required HTML5 attribute.
EDIT: grouped radios with name attr.
<div id="first">
<form>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
<label>Age</label>
<input type="number" maxlength="2">
<label>Gender</label>
<input type="radio" name="gender" value="m">Male</input>
<input type="radio" name="gender" value="f">Female</input>
<input type="submit" disabled>
</form>
</div>
<div id="second">
<form>
<label>Question 1</label>
<input type="radio" name="q1" value="y">Yes</input>
<input type="radio" name="q1" value="n">No</input>
<label>Question 2</label>
<input type="radio" name="q2" value="y">Yes</input>
<input type="radio" name="q2" value="n">No</input>
<input type="submit" disabled>
</form>
</div>

Hmm, nothing simpler than this:
$("form").on("change", function() {
$("input").each(function() {
var test = {radio:1, checkbox:1}[this.type] ? $(this).is(":checked") : !!this.value;
if(this.type !== "submit") console.log(test);
});
});
http://jsfiddle.net/bRKuV/3/

How can I disable one button of a jQuery-UI buttonset?

Example here:
http://jsfiddle.net/UVHtu/19/
I need to fill in the blank:
HTML:
<div id="options">
<input type="radio" id="op_a" name="op" value="a" />
<label for="op_a">Option A</label>
<input type="radio" id="op_b" name="op" value="b" />
<label for="op_b">Option B</label>
<input type="radio" id="op_c" name="op" value="c" />
<label for="op_c">Option C</label>
</div>
<input type="button" id="disable_button" value="Disable Option B" />
​
JavaScript:
$("#options").buttonset();
$("#disable_button").click(function(){
// What goes here to disable option B?
});
​

$("#options").buttonset();
$("#disable_button").click(function(){
// What goes here?
$('#op_b').attr("disabled", "disabled");
$("#options").buttonset("refresh");
});