PDA

View Full Version : Javascript checkboxes: Deselect other fields on click

universal sea
11-03-2005, 05:52 PM
I am working on a dating site for a client. While I am a senior PHP/MySQL programmer, Javascript has consistently evaded my learnings. Hours of searching for this today has resulted in not much. I appreciate your assistance.

Basically what I'm trying to do is this:

- There are numerous rows of different checkbox search fields, such as Languages, Hobbies and Occupation.
- Each of these fields has a "Doesn't matter" checkbox, which is the default and is checked at start up
- If one of the other checkboxes is clicked, the client wants the Doesn't matter checkbox to be unclicked
- If the Doesn't matter box is checked again, all the other boxes should be deselected.

One complication is that the form fields are generated automatically by a universal PHP script that generates all form fields, adding to search strings, the tables they are posted into, etc. Things like providing a separate fieldname for the Default checkbox item might not be easily possible. If there are ways I can maintain the same fieldname for each category while accomplishing this, that would be ideal.


note the naming conventions of these example fields:


<!-- RELATIONSHIP-->

<input type=checkbox name=relationship[] value="50" class=small> Single - never married
<input type=checkbox name=relationship[] value="52" class=small> Separated
<input type=checkbox name=relationship[] value="51" class=small> Divorced
<input type=checkbox name=relationship[] value="53" class=small> Widowed
<input type=checkbox name=relationship[] value="109" class=small> Attached
<input type=checkbox name=relationship[] value="54" class=small> Married
<input type=checkbox name=relationship[] value="xx" checked class=small> Doesn't matter

<!-- HAVE CHILDREN?
// searches for any of the options checked
-->

<input type=checkbox name=children[] value="5" class=small> None
<input type=checkbox name=children[] value="55" class=small> Yes - living with me full-time
<input type=checkbox name=children[] value="56" class=small> Yes - living with me part-time
<input type=checkbox name=children[] value="57" class=small> Yes - not living with me
<input type=checkbox name=children[] value="xx" checked class=small> Doesn't matter

Cheers.
vwphillips
11-03-2005, 06:40 PM
http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f6
Pyth007
11-03-2005, 07:41 PM
Are you going to be able to use vw's script? I notice the script requires a common title for the group and you had mentioned that the fields are generated automatically... I wasn't sure if this meant that you couldn't add anything else (like a 'title' attribute)...
universal sea
11-03-2005, 09:13 PM
thanks for the prompt replies and the script

VW - this accomplishes half of it. I should have been more clear - other than the Doesn't matter field, the other fields are normal multiple select checkboxes. In your example I can only have one from each group. My needs are the ability to select default one OR any number of the other ones.

Pyth - I can add things like titles, sure. The universal php code works on field names. Titles aren't in there, that would be fine to use. Any ideas?

Cheers to both of you.
vwphillips
11-03-2005, 10:19 PM
script I posted is easily modified for names

how is the default identified? The first in the group?

does not sound too much of a problem but not tonight
universal sea
11-03-2005, 10:27 PM
default is identified with the value=xx for every field it shows up in. The name beside the default seems to be "Doesn't matter" in all instances.

we could assign a title to it called Default or something, if that helps.
vwphillips
11-04-2005, 01:25 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (04-11-2005) http://www.vicsjavascripts.org.uk

// The ability to select the default OR any number of the other ones.

// Application Notes

// All checkBoxes of a group must have the same 'name'
// The Default checkbox must have a value of 'xx'.

// Initialised from a <BODY> onload event
// e.g.
// <body onload="zxcInitCkBoxes('fred','relationship[]','children[]');">
// where:
// parameter 0 = the form name (string)
// susequent parametes = the common name of the checkbox group (string)


// Functional Code - NO NEED to Change

function zxcInitCkBoxes(){
zxcargs=zxcInitCkBoxes.arguments;
zxcels=document[zxcargs[0]].elements.length;
for (zxc0=1;zxc0<zxcargs.length;zxc0++){
for (zxc1=0;zxc1<document[zxcargs[0]][zxcargs[zxc0]].length;zxc1++){
document[zxcargs[0]][zxcargs[zxc0]][zxc1].onclick=function(){ zxcCkBoxes(this); }
}
}
}

function zxcCkBoxes(obj){
zxccbs=document[obj.form.name][obj.name]
if (obj.value!='xx'&&obj.checked){
for (zxc0=0;zxc0<zxccbs.length;zxc0++){
if (zxccbs[zxc0].value=='xx'){
zxccbs[zxc0].checked=false;
}
}
}
if (obj.value=='xx'&&obj.checked){
for (zxc0=0;zxc0<zxccbs.length;zxc0++){
if (zxccbs[zxc0].value!='xx'){
zxccbs[zxc0].checked=false;
}
}
}
}

//-->
</script>

</head>

<body onload="zxcInitCkBoxes('fred','relationship[]','children[]');">
<form name="fred">
<!-- RELATIONSHIP-->

<input type=checkbox name=relationship[] value="50" class=small> Single - never married
<input type=checkbox name=relationship[] value="52" class=small> Separated
<input type=checkbox name=relationship[] value="51" class=small> Divorced
<input type=checkbox name=relationship[] value="53" class=small> Widowed
<input type=checkbox name=relationship[] value="109" class=small> Attached
<input type=checkbox name=relationship[] value="54" class=small> Married
<input type=checkbox name=relationship[] value="xx" checked class=small> Doesn't matter
<br>
<!-- HAVE CHILDREN?
// searches for any of the options checked
-->

<input type=checkbox name=children[] value="5" class=small> None
<input type=checkbox name=children[] value="55" class=small> Yes - living with me full-time
<input type=checkbox name=children[] value="56" class=small> Yes - living with me part-time
<input type=checkbox name=children[] value="57" class=small> Yes - not living with me
<input type=checkbox name=children[] value="xx" checked class=small> Doesn't matter
</form>

<br>
<br>

</body>

</html>

looked at this again

from the heading it seems that the 'other' check boxes should be exclusive
universal sea
11-04-2005, 03:57 PM
That's brilliant mate, cheers to you.

If you have to state an all-encompassing Javascript philosophy in terms of learning the language and your approach to solving problems, what would it be?

When I started PHP and it was giving me fits, a wise man named Ucheche said something like, it if seems too hard, you're probably doing it wrong. Everything was roses after.
vwphillips
11-04-2005, 04:08 PM
o state an all-encompassing Javascript philosophy in

don't have philosophies, far too restrictive