Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Toggle Checkbox JS

Super simple I know, but I can't get it right

7:56 am on Oct 8, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 20, 2004
votes: 0

This is so simple (I'm sure) I'm a bit embarassed to post this, but...

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 = "";
reserve.checked = "";

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.


11:28 am on Oct 8, 2006 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4

Hi there neophyte,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">


<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') {
else {


<form action="#">
<label><input type="checkbox" name="reserve"/> : reserve</label><br />
<label><input type="checkbox" name="checkIn"/> : check in</label>


12:03 pm on Oct 8, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 2, 2003
votes: 0

There is a case for using checkboxes - sometimes you want all options clear.

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

This function will work for any number of checkboxes. It must be called thus...

<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;"/>

Note that the onclick code is identical in all cases.
Select the final line of the function from the choice given to achieve the required behaviour and then test in all major browsers (IE, Firefox, Opera).

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.


12:17 am on Oct 9, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 20, 2004
votes: 0

BirdBrain and 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.