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;
}

Radio button malfunctioning when used inside label tag

i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>

radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.

Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>

1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>

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/

Finding value of closest set of radio buttons

I've got multiple sets of radio buttons and am trying to use the .find() function to dynamically find the value of radio buttons in the same grouping.
However, it keeps returning undefined.
<fieldset>
<div id="border1">
<input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra">
<input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion">
</div>
<div id="border2">
<input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges">
<input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes">
</div>
</fieldset>
<fieldset>
<div class="border1">
<input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey">
<input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot">
</div>
<div class="border2">
<input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas">
<input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries">
</div>
</fieldset>
(Sorry, didn't mean to put the same IDs. Was a copy/paste.)
I'm trying to use jquery to dynamically find the values:
$(".animals .radio").change(function()
{
alert($(this).closest('fieldset').find('.fruit').val());
etc.
}
But it keeps returning undefined
Also tried:
$(this).closest('fieldset').find('.fruit:checked').val()
Is there another way I should be approaching this?
I don't want to have to write code for every single set of radio buttons.

$(".animals .radio") is not the query you are looking for, it should be $(".animals.radio") (no white space between classes).
$(".animals .radio") looks for an element with class "radio" inside an element with class "animals".

It should .animals.radio, not .animals .radio.
.animals.radio means these two classes belongs to same element. (in your case this is right)
.animals .radio means .animals is ancestor of .radio.
$(".animals.radio").change(function() {
alert($(this).closest('fieldset').find('.fruit').val());
});
AND ONE THINK, YOUR CODE HAVE DUPLICATE IDS, AVOID IT.

How about not using id="" twice, and setting a type="radio" on those inputs for starters ?
You are also using the same ID for multiple elements, stop that ?
It should probably be :
<fieldset>
<div id="border1">
<input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" />
<input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" />
</div>
<div id="border2">
<input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" />
<input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" />
</div>
</fieldset>
<fieldset>
<div class="border1">
<input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" />
<input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" />
</div>
<div class="border2">
<input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" />
<input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" />
</div>
</fieldset>​​​​​​​​​​
To get both values :
$('input[type="radio"]').on('change', function() {
$(this).closest('fieldset').find('.fruit').each(function() {
alert(this.value);
});
}​);​
To get only the one that is checked :
$('input[type="radio"]').on('change', function() {
var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
alert(elm.value);
}​);​

$(".animals .radio") is getting you all the elements with class radio that have parents with class animals.
You want elements with both classes animals and radio, which is like $(".animals.radio")

Disable radio button according to selected choice

I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?

There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson

Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.

You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.