...

View Full Version : check all checkboxes that have same "prefix" in name



tisource
03-25-2005, 08:08 PM
This may or may not be possible, but I thought I'd try.

First let me explain my approach. I am working on an article search for a newspaper site. I'm working on a page that provides the user with advanced controls to limit or refine the search.

The search itself (the CGI side of it) works great. However, I think it would be a great convenience to have a "check all" or "check none" for various sub groups.

For example, there is a "months" section. If they only want to search articles that were published in January, they can select that box and uncheck the other months. It would be convenient to have a "check all months" or "uncheck all months" for that part of the search form.

Here's where it gets complicated: the available years checkboxes are dynamic. My code queries the database to determine what years the article archive has articles for (in other words, if we don't have articles from the year 1999, I don't want a checkbox for the year 1999). From a javascript point of view, it could be hard to code, because the form may be different from time to time.

Each section of the form has something in common: the same prefix in the name. For example, in the years section, the "name" of each checkbox may be as follows: "year_2003," "year_2004," "year_2005" and so on. The months are the same: "month_01," "month_02" .... "month_12" etc.

I could have my CGI generate a javascript each time it loads that statically handles every checkbox in the form, but that could get really hairy from a CGI stand point. I'd rather not do that if I can avoid it.

Is there a way I can write a single javascript function that checks all boxes in a particular form with the same "prefix" in the name? Or do you have a better idea to handle this.

vwphillips
03-26-2005, 12:16 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var cbAry=new Array('tom','fred');
var cbNameAry=new Array('X','X');
var ips,OK;

function InitCkBx(){
ips=document.getElementsByTagName('INPUT');
for (i=0;i<ips.length;i++){
if (ips[i].type=='checkbox'){
for (i1=0;i1<cbAry.length;i1++){
if (ips[i].name.match(cbAry[i1])){
if (cbNameAry[i1]=='X'){ cbNameAry[i1]=new Array(); }
cbNameAry[i1][cbNameAry[i1].length]=ips[i];
}
}
}
}
}

function CkBxCheck(){
for (i=0;i<cbNameAry.length;i++){
OK=0;
for (i1=0;i1<cbNameAry[i].length;i1++){
if (cbNameAry[i][i1].checked){
OK=1
}
}
if (!OK){
alert('None Checked in Group '+cbAry[i]);
}
}

}

//-->
</script></head>

<body onload="InitCkBx()" >
<br>
Group fred<br>
<input type="checkbox" name="fred1">
<input type="checkbox" name="fred2">
<input type="checkbox" name="fred3">
<input type="checkbox" name="fred4">
<input type="checkbox" name="fred5">
<br>
Group tom<br>
<input type="checkbox" name="tom1">
<input type="checkbox" name="tom2">
<input type="checkbox" name="tom3">
<input type="checkbox" name="tom4">
<br>
<input type="button" name="" value="Check" onclick="javascript:CkBxCheck();" >

</body>

</html>

tisource
03-26-2005, 03:24 AM
Interesting functions...

I think I follow most of it, but could you clarify what it does? The thing that is really throwing me off is the initCxBx function...

What I need is a link that checks or uncheck all the boxes in a particular group when it is invoked. For example, when a user clicks on the text link "Check all months" it needs to check all the "month" checkboxes. When a user clicks on the text link "Uncheck all years" it needs to uncheck all the "year" checkboxes.

In other words, its a convenience for my users. They could manually check or uncheck all the boxes as needed, but the javascript link makes that happen instantly.

Thanks

vwphillips
03-26-2005, 09:34 AM
Thought you wanted at least one of each group to be checked

this is chech.uncheck all




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var ckBoxAry=new Array();

function CheckBox(cb,txt){
obj=document.getElementById(cb);
obj.ary=new Array();
obj.txt=document.getElementById(txt);
cks=obj.getElementsByTagName('INPUT');
for (i=0;i<cks.length;i++){
if (cks[i].type=='checkbox'){
obj.ary[obj.ary.length]=cks[i];
if (i<cks.length-1){
cks[i].onclick=function(){ change(this.parentNode.ary,this.parentNode.txt); }
}
else {
cks[i].onclick=function(){ CheckAllNone(this.parentNode.ary,this.parentNode.txt); }
}
}
}
change(obj.ary,obj.txt);
}

function change(ary,txt){
ckCnt=0;
for (i=0;i<ary.length;i++){
if (ary[i].checked){
ckCnt++;
}
}
txt.innerHTML='Select All';
if (ckCnt==ary.length-1){
txt.innerHTML='Select None';
}
}

function CheckAllNone(ary,txt){
ary[ary.length-1].checked=false;
checked=true;
if (txt.innerHTML=='Select None'){
checked=false;
}
for (i=0;i<ary.length-1;i++){
ary[i].checked=checked;
}
change(ary,txt);
}

//-->
</script>

</head>

<body onload="CheckBox('CkGroup1','ckAllNone1');CheckBox('CkGroup2','ckAllNone2')" >

<p id="CkGroup1" >
Group 1<br>
<input type="checkbox" name="" checked=true ><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name="" ><span id=ckAllNone1 >Select All</span><br>
</p>
<br>
<p id="CkGroup2" >
Group 2<br>
<input type="checkbox" name="" ><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name=""><br>
<input type="checkbox" name="" ><span id=ckAllNone2 >Select All</span><br>
</p>

</body>

</html>

I will make one to use the names

vwphillips
03-26-2005, 10:33 AM
useing names



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var cbAry=new Array('tom','fred');
var cbNameAry=new Array('X','X');
var ips,OK,obj;

function InitCkBx(){
ips=document.getElementsByTagName('INPUT');
for (i=0;i<ips.length;i++){
if (ips[i].type=='checkbox'){
for (i1=0;i1<cbAry.length;i1++){
if (ips[i].name.match(cbAry[i1])){
if (cbNameAry[i1]=='X'){ cbNameAry[i1]=new Array(); }
cbNameAry[i1][cbNameAry[i1].length]=ips[i];
ips[i].onclick=function(){ CkBxCheck(); }
}
}
}
}
CkBxCheck();
}

function CkBxCheck(){
for (i=0;i<cbNameAry.length;i++){
document.getElementById(cbAry[i]).value='Check All';
OK=0;
for (i1=0;i1<cbNameAry[i].length;i1++){
if (cbNameAry[i][i1].checked){
OK++;
}
if (OK==cbNameAry[i].length){
document.getElementById(cbAry[i]).value='Check None';
}
}
}
}

function CkBxAllNone(obj){
OK=-1;
for (i=0;i<cbNameAry.length;i++){
if(cbNameAry[i][0].name.match(obj.id)){
OK=i;
}
}
if (OK<0){
alert('Error');
return;
}
obj=document.getElementById(obj.id);
if (obj.value=='Check All'){
obj.value='Check None';
for (i1=0;i1<cbNameAry[OK].length;i1++){
cbNameAry[OK][i1].checked=true;
}
}
else {
obj.value='Check All';
for (i1=0;i1<cbNameAry[OK].length;i1++){
cbNameAry[OK][i1].checked=false;
}
}
}

//-->
</script></head>

<body onload="InitCkBx()" >
<br>
Group fred<br>
<input type="checkbox" name="fred1">
<input type="checkbox" name="fred2">
<input type="checkbox" name="fred3">
<input type="checkbox" name="fred4">
<input type="checkbox" name="fred5">
<br>
<input type="button" id="fred" value="Check All" onclick="javascript:CkBxAllNone(this);" ><br>
<br>
Group tom<br>
<input type="checkbox" name="tom1">
<input type="checkbox" name="tom2">
<input type="checkbox" name="tom3">
<input type="checkbox" name="tom4">
<br>
<input type="button" id="tom" value="Check All" onclick="javascript:CkBxAllNone(this);" ><br>

</body>

</html>

tisource
03-27-2005, 02:49 AM
First of all, thank you for your help. You have been very, very helpful.

I didn't use your exact code, but I was able to construct my own code based on your examples. You were a big help.

Here's my code:


# pf="prefix" and ck="checked" (0|1)
function checkall (pf,ck) {
cbox=document.getElementsByTagName('INPUT');
for (i=0; i<cbox.length; i++){
if (cbox[i].type=='checkbox'){
if (cbox[i].name.indexOf(pf) > -1) {
if (ck == "1") { cbox[i].checked = true; } else { cbox[i].checked = null; }
}
}
}
}


Then I can check all the "months" checkbox with this link:


<a href="javascript:checkall('page','1');">Check all</a>


That way, all checkboxes with "page" in them are checked. I then call this function again for other sections, changing 'page' to other things like 'month' or 'year' ... and it works great.

Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum