Personal tools
Navigation
 

Oscarizing radio boxes and check boxes html file

demonstration of code

HTML icon Oscar Radio and Check Boxes.html — HTML, 2 kB (2441 bytes)

File contents

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 68</title>
<!-- CSS that applies rules to all classes that contain "only-one-radio" plus any wildcard suffix-->
<style type="text/css">
[class^="only-one-radio"] { 
	width: 14px;
	height: 14px;
	font-size: 14px;
	border: 1px solid #000000;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	background: aquamarine;
}
</style>
<script>

function init(){ //this blacks out boxes that are checked on load
var x = document.getElementsByClassName("cradio");
for (var i = 0; i < x.length; i++) {
if (x[i].value=="X"){
x[i].style.boxShadow = "inset 0 0 0 1000px black"  //comment this line to inactivate black box
}
}
}
function update(vid){ //only one box in the radio group will be checked
var x = document.getElementsByClassName(vid.className);
if (x.length==1 && x[0].value=="X"){ //if there is only one member of the radiogroup, then this will act as checkbox rather than radiobox
x[0].style.boxShadow = "inset 0 0 0 1000px white"
x[0].value=""
return
}
for (var i = 0; i < x.length; i++) {
    x[i].style.boxShadow = "inset 0 0 0 1000px white"
    x[i].value = "";
}
vid.value = "X"
vid.style.boxShadow = "inset 0 0 0 1000px black"  //comment this line to inactivate black box
}
</script>
</head>

<body onload="init()">

<table style="height: 29px; position: absolute; left: 91px; top: 57px;">
	<tr>
		<td>
		<input id="radio1" class="only-one-radio1  cradio" onclick="update(this)" style="width: 14px" type="text" value="X" /></td>
		<td>
		<input id="radio2" class="only-one-radio1 cradio" onclick="update(this)" style="width: 14px" type="text" /></td>
		<td>
		<input id="radio3" class="only-one-radio1 cradio" onclick="update(this)" style="width: 14px" type="text" /></td>
	</tr>
	<tr>
		<td>
		<input id="radio4" class="only-one-radio2  cradio" onclick="update(this)" style="width: 14px" type="text" value="X" /></td>
		<td>
		<input id="radio4" class="only-one-radio2 cradio" onclick="update(this)" style="width: 14px" type="text" /></td>
		<td>
		<input id="radio4" class="only-one-radio2 cradio" onclick="update(this)" style="width: 14px" type="text" /></td>
	</tr>
	<tr>
		<td>
		<input id="radio5" class="only-one-radio3  cradio" onclick="update(this)" style="width: 14px" type="text" value="X" /></td>
		<td>
	</tr>
</table>

</body>

</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)