...

View Full Version : checkbox question



bazz
10-07-2008, 02:08 PM
Hi,

I know very little about js and need your help.

My web form contains a load of checkboxes. 31 per row and one row for each of a number of rooms. I need to be able to check (say), row1 box 2 and when I check row1 box10, all boxes between 2 and 10 also check automatically. If I then check row2 box11 and row2 box15, then all on row two, between 11 and 15 will be checked. It's such a pain to have to check each one individually.

Can this be done? Can any of you send me to a tutorial where I could work it out? Maybe one of you might have the time to code it for me? (Pm me if you need more ;) )

bazz

vwphillips
10-07-2008, 04:45 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Check(nme){
var cbs=document.getElementsByName(nme);
for (var srt=-1,fin=-1,zxc0=0;zxc0<cbs.length;zxc0++){
if (cbs[zxc0].checked){
srt=zxc0;
for (var zxc0a=zxc0+1;zxc0a<cbs.length;zxc0a++){
if (cbs[zxc0a].checked) fin=zxc0a;
}
break;
}
}
for (var zxc1=srt;zxc1<fin;zxc1++){
cbs[zxc1].checked=true;
}
}

/*]]>*/
</script></head>

<body>
<form>
<fieldset onclick="Check('tom[]');">
<input type="checkbox" name="tom[]" /><input type="checkbox" name="tom[]" />
<input type="checkbox" name="tom[]" /><input type="checkbox" name="tom[]" />
</fieldset>
</form>
</body>

</html>

bazz
10-07-2008, 06:34 PM
Thank you very much vic.

That seems to work but I have a question...

If I have two rows which are independent, should I make them use a name, different from tom and if so, would I need to make a duplicate cdata for that row or just modify the one you have done.

The purpose is this..
I have a row of 31 td's for room one and a row of 31 td's for room2 in an bookings thing. I need to be able to click, say, four days in rm1 and two in rm2

my html is like this



<table>
<tr>
<td class='rooms_label'>1 </td>
<td class="vacant"><input type='checkbox' name='booking' value="" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="" />03</td>
<td class="vacant"><input type='checkbox' name='booking' value="" />04</td>
</tr>
<tr>
<td class='rooms_label'>2 </td>
<td class="vacant"><input type='checkbox' name='booking' value="" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="" />03</td>
</tr>
</table>


bazz

bazz
10-07-2008, 10:29 PM
Blimey you have both been very helpful. :thumbsup:

If I could ask one more thing...

The values would in fact be the date of month rather than room number. (1st to 31st on each row)

So in your demo the first row would be room1 from 1st - 10th and the second row would be room2, 1st - 10th.

Can it be set so that if room1 1st - 4th has been checked, that any other room checked for the same dates, would show an error message on screen?

bazz

bazz
10-08-2008, 12:57 AM
You wrote:

Sorry, I won't play the "okay, THAT works, but what I really need is..." game.

If you cannot, or will not completely and accurately describe the problem in your initial post...

Ask for help, but stop trying to manipulate and exploit those who expend their valuable time to help you -- just you. Just YOU.

I'm finished.

I am not sure what I did to attract such a tirade of abuse.

I am very grateful for the help you have given but, if you re-read my first post, you will see that I did actually explain it. And, no, I don't play that 'game' either.

If you are unwilling to offer help then that is obviously your prerogative. But there is no need to 'go off on one' for no apparent reason.


bazz

vwphillips
10-08-2008, 06:19 PM
there must be an easier way but


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Check(p,nme){
var all=document.getElementsByName(nme);
for (var allp,ary=[],zxc0=0;zxc0<all.length;zxc0++){
if (all[zxc0].type=='checkbox'){
allp=all[zxc0];
while (allp.parentNode){
allp=allp.parentNode;
if (allp==p){
ary.push(all[zxc0]);
break;
}
}
}
}
for (var srt=-1,fin=-2,zxc1=0;zxc1<ary.length;zxc1++){
if (ary[zxc1].checked){
srt=zxc1;
for (var zxc1a=zxc1+1;zxc1a<ary.length;zxc1a++){
if (ary[zxc1a].checked){
fin=zxc1a;
}
}
break;
}
}
for (var zxc2=srt;zxc2<=fin;zxc2++){
ary[zxc2].checked=true;
}
for (var cnt=1,zxc3=0;zxc3<ary.length;zxc3++){
if (ary[zxc3].checked) cnt++;

}
for (var zxc4=0;zxc4<all.length;zxc4++){
for (var zxc4a=0;zxc4a<ary.length;zxc4a++){
if (all[zxc4]!=ary[zxc4a]&&all[zxc4].value==ary[zxc4a].value){
if (fin>-2||(p.cnt&&cnt<p.cnt)) all[zxc4].checked=ary[zxc4a].checked;
}
}
}
p.cnt=cnt;
}
/*]]>*/
</script></head>

<body>
<form>
<table>
<tr id="a1" onclick="Check(this,'booking');" >
<td class='rooms_label'>1 </td>
<td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
<td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
</tr>
<tr id="a2" onclick="Check(this,'booking');" >
<td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
<td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
</tr>
</table></form>
</body>

</html>

ohgod
10-08-2008, 07:07 PM
don't take it personally bazz, cranford went off on me for using php to generate html. so............... i'm assuming some sort of bipolar thing.

bazz
10-08-2008, 07:46 PM
there must be an easier way but


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Check(p,nme){
var all=document.getElementsByName(nme);
for (var allp,ary=[],zxc0=0;zxc0<all.length;zxc0++){
if (all[zxc0].type=='checkbox'){
allp=all[zxc0];
while (allp.parentNode){
allp=allp.parentNode;
if (allp==p){
ary.push(all[zxc0]);
break;
}
}
}
}
for (var srt=-1,fin=-2,zxc1=0;zxc1<ary.length;zxc1++){
if (ary[zxc1].checked){
srt=zxc1;
for (var zxc1a=zxc1+1;zxc1a<ary.length;zxc1a++){
if (ary[zxc1a].checked){
fin=zxc1a;
}
}
break;
}
}
for (var zxc2=srt;zxc2<=fin;zxc2++){
ary[zxc2].checked=true;
}
for (var cnt=1,zxc3=0;zxc3<ary.length;zxc3++){
if (ary[zxc3].checked) cnt++;

}
for (var zxc4=0;zxc4<all.length;zxc4++){
for (var zxc4a=0;zxc4a<ary.length;zxc4a++){
if (all[zxc4]!=ary[zxc4a]&&all[zxc4].value==ary[zxc4a].value){
if (fin>-2||(p.cnt&&cnt<p.cnt)) all[zxc4].checked=ary[zxc4a].checked;
}
}
}
p.cnt=cnt;
}
/*]]>*/
</script></head>

<body>
<form>
<table>
<tr id="a1" onclick="Check(this,'booking');" >
<td class='rooms_label'>1 </td>
<td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
<td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
</tr>
<tr id="a2" onclick="Check(this,'booking');" >
<td class="vacant"><input type='checkbox' name='booking' value="1st" />01</td>
<td class="vacant"><input type='checkbox' name='booking' value="2nd" />02</td>
<td class="vacant"><input type='checkbox' name='booking' value="3rd" />03</td>
<td class="vacant"><input type='checkbox' name='booking' value="4th" />04</td>
</tr>
</table></form>
</body>

</html>

Vic, thank you very much.

I think I can merge that with my perl code and get it to continue to work as it does in a plain html page. I changed the second tr trigger and the param name to be a room_number and it works exactly as I hoped for.
yup, it's merged and working :)
Once again, thanks for your help.

@ohgod: Not taken personally, I'm too long in the tooth for that. I still found him to be good at JS but a bit unpleasant at the same time. nuff said I think.

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum