Forum Moderators: open
Before everyone starts saying "this is what radio buttons are for!" ... I know, but I'm being forced to use checkboxes on demand from a client.
Okay, got 2 checkboxes on a page that need to act like radio buttons - one gets checked, the other one gets unchecked (if it's been previously checked).
I've been messing around with some scripts I found on the web but can't get it to do the deal.
**********************************
<input type="checkbox" name="reserve" onclick="toggle('checkIn')"/>
<input type="checkbox" name="checkIn" onclick="toggle('reserve')"/>
<script language=javascript>
function toggle(unCheck)
{
if (unCheck == 'checkIn')
checkIn.checked = "";
else
reserve.checked = "";
}
</script>
**********************************
I've done quite a lot of php, but haven't ever touched any JS so I don't know if I've got syntax errors or what ... could somone who knows what's happening - or not happening - lead me in the right direction?
Thanks to all in advance.
Neophyte
does this help...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!---->
</style><script type="text/javascript">
<!--
window.onload=function() {
var df=document.forms[0];
var inp=df.getElementsByTagName('input');
for(c=0;c<inp.length;c++) {
if(inp[c].type=='checkbox') {
inp[c].onclick=function(){
if(this.name=='reserve'){
df.checkIn.checked=false;
}
else {
if(this.name=='checkIn'){
df.reserve.checked=false;
}
}
}
}
}
}
//-->
</script></head>
<body><form action="#">
<div>
<label><input type="checkbox" name="reserve"/> : reserve</label><br />
<label><input type="checkbox" name="checkIn"/> : check in</label>
</div>
</form></body>
</html>
Firstly, you should use the id attribute rather than the name attribute to uniquely identify each checkbox. The name value determines how the form data is submitted. (Often name and id can be identical).
function radioCheck(me,group)
{ var checked = me.checked;
if (checked) for (var i = 1; i < arguments.length; i++) {
var ck = document.getElementById(arguments[i]);
if (ck) ck.checked = false;
}
me.checked = checked; // checkbox action
//me.checked = true; // radiobox action
}
<input type="checkbox" name="reserve" id="ck_reserve" onclick="radioCheck(this,'ck_reserve','ck_checkin'); return true;"/>
<input type="checkbox" name="checkIn" id="ck_checkin" onclick="radioCheck(this,'ck_reserve','ck_checkin'); return true;"/>
To avoid repeated html code in the onclick events, you could create an array of id values, etc. but if you only have a few checkboxes, it's not worth the extra effort.
Kaled.
Thanks so, so, much to the both of you for your efforts. Brilliant - and they both work very nicely.
I'm going to be using Kaled's example at this point because what is going on is a bit simpler for me to understand, but equal thanks go out to both. Now I can move along with this project.
Neophyte
