Welcome to WebmasterWorld Guest from 54.162.248.199

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)

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Hi there 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>


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

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



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.

Kaled.

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

10+ Year Member



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.

Neophyte

 

Featured Threads

Hot Threads This Week

Hot Threads This Month