homepage Welcome to WebmasterWorld Guest from 54.198.140.182
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggle Checkbox JS
Super simple I know, but I can't get it right
neophyte




msg:3112844
 7:56 am on Oct 8, 2006 (gmt 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 = "";
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

 

birdbrain




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

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

kaled




msg:3112978
 12:03 pm on Oct 8, 2006 (gmt 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.

Kaled.

neophyte




msg:3113512
 12:17 am on Oct 9, 2006 (gmt 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.

Neophyte

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved