check several, but not all checkboxes with 1 click

[John Banta]

Hi,
I have created a 12 month calendar where each day has a check box
whereby the user can indicate if that day is available or not
available for a certain event. The calendar is 'drawn' in a single
form rather than 12 separate forms.

If the checkbox contained in each day within each month has a unique
name such as 1August2003, 2August2003, etc, is there a way in
Javascript where I could have a button by each month where the user
could click once to check each box within that month but not the other
11 months? For example, I would like to have a link next to the
January header where the user can select all days in January.

I have seen posts where you can sleect all boxes within the form but
that isn't exactly what I need...I need to somehow do that but only if
the name contains a certain string (the month name in this case). Any
help would be much appreciated.

-John

 

[Richard Hockey]

perhaps this might be useful:

<script type="text/javascript">
var MonthDays=Array("","31", "28", "31", "30", "31", "30", "31", "31", "30",
"31", "30", "31");

function MonthToggle(FormObject,CBMonth)
{
var daycount="01";
for(n=1;n<=MonthDays[parseInt(CBMonth,10)];n++)
{
if(n<10)
daycount='0'+n;
else
daycount=n;
var CBObject=FormObject.elements['m'+CBMonth+daycount];

// this toggles the state of each checkbox, depending on the current state
// if you want to just set or unset all the checkboxes the code will be
simpler
// use CBObject.checked=true/false; instead of the switch statements.

switch(CBObject.checked)
{
case true:
CBObject.checked=false;
break;
case false:
CBObject.checked=true;
break;
}

}
}
</script>

assuming the form is layed out in the following manner:

<form name="yearform">
<input type="checkbox" name="m0101" value="0101">1
<input type="checkbox" name="m0102" value="0102">2
<input type="checkbox" name="m0103" value="0103">3
<input type="checkbox" name="m0104" value="0104">4
.....
<input type="checkbox" name="m0131" value="0131">31
<a href="#" onClick="MonthToggle(document.forms['yearform'],'01'); return
false;">January</a>

<input type="checkbox" name="m0201" value="0201">1
<input type="checkbox" name="m0202" value="0202">2
<input type="checkbox" name="m0203" value="0203">3
<input type="checkbox" name="m0204" value="0204">4
.....
<input type="checkbox" name="m0228" value="0228">28
<a href="#" onClick="MonthToggle(document.forms['yearform'],'02'); return
false;">JFebruary</a>

......

<input type="checkbox" name="m1201" value="1201">1
<input type="checkbox" name="m1202" value="1202">2
<input type="checkbox" name="m1203" value="1203">3
<input type="checkbox" name="m1204" value="1204">4
.....
<input type="checkbox" name="m1231" value="1231">31
<a href="#" onClick="MonthToggle(document.forms['yearform'],'12'); return
false;">December</a>
</form>

tested in IE6, NetScape 7 and Opera 7.01

 

[Richard Hockey]

perhaps this might be useful:

<script type="text/javascript">
var MonthDays=Array("","31", "28", "31", "30", "31", "30", "31", "31", "30",
"31", "30", "31");

function MonthToggle(FormObject,CBMonth)
{
var daycount="01";
for(n=1;n<=MonthDays[parseInt(CBMonth,10)];n++)
{
if(n<10)
daycount='0'+n;
else
daycount=n;
var CBObject=FormObject.elements['m'+CBMonth+daycount];

// this toggles the state of each checkbox, depending on the current state
// if you want to just set or unset all the checkboxes the code will be
simpler
// use CBObject.checked=true/false; instead of the switch statements.

switch(CBObject.checked)
{
case true:
CBObject.checked=false;
break;
case false:
CBObject.checked=true;
break;
}

doh! abandon the switch statement and replace it with:

CBObject.checked=!CBObject.checked;

to toggle the checkbox states

}
}
</script>

assuming the form is layed out in the following manner:

<form name="yearform">
<input type="checkbox" name="m0101" value="0101">1
<input type="checkbox" name="m0102" value="0102">2
<input type="checkbox" name="m0103" value="0103">3
<input type="checkbox" name="m0104" value="0104">4
....
<input type="checkbox" name="m0131" value="0131">31
<a href="#" onClick="MonthToggle(document.forms['yearform'],'01'); return
false;">January</a>

<input type="checkbox" name="m0201" value="0201">1
<input type="checkbox" name="m0202" value="0202">2
<input type="checkbox" name="m0203" value="0203">3
<input type="checkbox" name="m0204" value="0204">4
....
<input type="checkbox" name="m0228" value="0228">28
<a href="#" onClick="MonthToggle(document.forms['yearform'],'02'); return
false;">JFebruary</a>

.....

<input type="checkbox" name="m1201" value="1201">1
<input type="checkbox" name="m1202" value="1202">2
<input type="checkbox" name="m1203" value="1203">3
<input type="checkbox" name="m1204" value="1204">4
....
<input type="checkbox" name="m1231" value="1231">31
<a href="#" onClick="MonthToggle(document.forms['yearform'],'12'); return
false;">December</a>
</form>

tested in IE6, NetScape 7 and Opera 7.01

Hi,
I have created a 12 month calendar where each day has a check box
whereby the user can indicate if that day is available or not
available for a certain event. The calendar is 'drawn' in a single
form rather than 12 separate forms.

If the checkbox contained in each day within each month has a unique
name such as 1August2003, 2August2003, etc, is there a way in
Javascript where I could have a button by each month where the user
could click once to check each box within that month but not the other
11 months? For example, I would like to have a link next to the
January header where the user can select all days in January.

I have seen posts where you can sleect all boxes within the form but
that isn't exactly what I need...I need to somehow do that but only if
the name contains a certain string (the month name in this case). Any
help would be much appreciated.

-John

 

[Lasse Reichstein Nielsen]

I have created a 12 month calendar where each day has a check box
whereby the user can indicate if that day is available or not
available for a certain event. The calendar is 'drawn' in a single
form rather than 12 separate forms.

Good. If you plan to submit the form, you only want one. And if you
don't want to submit it, you don't need the form at all.

If the checkbox contained in each day within each month has a unique
name such as 1August2003, 2August2003,

First: An HTML name/id is not allowed to start with a digit. You should
change it to something like Date1August2003.

etc, is there a way in Javascript where I could have a button by
each month where the user could click once to check each box within
that month but not the other 11 months? For example, I would like to
have a link next to the January header where the user can select all
days in January.

Don't use a link if you are not referring to another page. Use a button.
You know the month and year when you create the form, so you can have
the button be something like

<input type="button" value="Select All"
onclick="selectAllDays(this.form,'January',2003)">

and the function is:

function selectAllDays(form,mth,yr) {
var name;
for(var i=1;form.elements[name="Date"+i+mth+yr];i++) {
form.elements[name].checked=true;
}
}


/L

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in

perhaps this might be useful:

<script type="text/javascript">
var MonthDays=Array("","31", "28", "31", "30", "31", "30", "31", "31", "30",
"31", "30", "31");

Except in a Leap Year.

function LastOfMonth(D) { // Date Object, string, or number
with (new Date(D)) { setDate(32) ; return 32-getDate() } }


Responses should follow trimmed quotes - see FAQ,

 

[John Banta]

First: An HTML name/id is not allowed to start with a digit. You should
change it to something like Date1August2003.

Thanks for the info. I am not questioning you but I am fairly new to
this and would like to understand what you mean by "HTML name/id is
not allowed to start with a digit"? My form appears to work as I am
expecting it to so is there a browser problem that I may run into or
is it bad form, etc?

Don't use a link if you are not referring to another page. Use a button.
You know the month and year when you create the form, so you can have
the button be something like

Yes, I agree. This was my poor choice of wording...I am intedning to
use a button.

-John

 

[Lasse Reichstein Nielsen]

Thanks for the info. I am not questioning you but I am fairly new to
this and would like to understand what you mean by "HTML name/id is
not allowed to start with a digit"?

According to the HTML 4.0 specification (and all later HTML and XHTML
specifications), the values of "id" and "name" attributes are not
allowed to begin with a digit.

My form appears to work as I am expecting it to so is there a
browser problem that I may run into or is it bad form, etc?

Browsers are very forgiving creatures. They have to be, since many web
authors don't know, or don't care, that there are rules for HTML, and
happily accepts anything that works in their favorite browser.

You will *probably* not run into any problems. The keyword is
"probably".

When using Javascript to access form elements with the dot-notation,
e.g.
<form id="foo"><input type="text" id="bar"></form>
accessed using
document.forms.foo.elements.bar.value
it is important that the id-values does not start with a number.
The following is syntactically incorrect:
document.forms.2foo

/L

 

[YD]

When using Javascript to access form elements with the dot-notation,
e.g.
<form id="foo"><input type="text" id="bar"></form>
accessed using
document.forms.foo.elements.bar.value
it is important that the id-values does not start with a number.

Are you sure you can use id instead of name for the elements of a
form? I mean the element won't be submitted if no name attribute was
given. I know the use of id or name for the DOM is equivalent to
retrieve an element and the use of the name attribute for form is
deprecated.

 

[Lasse Reichstein Nielsen]

Are you sure you can use id instead of name for the elements of a
form? I mean the element won't be submitted if no name attribute was
given.

You can use it, and it won't be submitted.
I am mostly used to writing forms that are not submitted. The point
in this case is the same for "name".

I know the use of id or name for the DOM is equivalent to
retrieve an element and the use of the name attribute for form is
deprecated.

It has, for form, but not for elements. Personally, I would use both
id and name on the elements, and with different values. The name is
for submitting, an need only be unique within the form, and the id is
for accessing on the client and should be unique within the page.

/L