Jump to content

Check All Button (for Checkboxes)


xProteuSx

Recommended Posts

I have created a table with a series of checkboxes.  At the bottom of the table there are 'Check All' and 'Uncheck All' buttons.  For some reason, some of the boxes get checked, while some don't, and I can't figure out, for the life of me, why the ones that don't get checked aren't getting checked!  Its driving me crazy!

 

 

 

I know that this is an unformatted mess, but copy and paste it into a .html file, and see the problem for yourself (PLEASE!):

 

 

 

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

 

<script language="javascript">

function checkAll()

{

if (document.markform['marked[]'])

{

for (i = 0; i < document.markform['marked[]'].length; i++)

{document.markform['marked[]'].checked = true ;}

}

if (document.markform['marked1[]'])

{

for (i = 0; i < document.markform['marked1[]'].length; i++)

{document.markform['marked1[]'].checked = true ;}

}

if (document.markform['marked2[]'])

{

for (i = 0; i < document.markform['marked2[]'].length; i++)

{document.markform['marked2[]'].checked = true ;}

}

if (document.markform['marked3[]'])

{

for (i = 0; i < document.markform['marked3[]'].length; i++)

{document.markform['marked3[]'].checked = true ;}

}

if (document.markform['marked4[]'])

{

for (i = 0; i < document.markform['marked4[]'].length; i++)

{document.markform['marked4[]'].checked = true ;}

}

if (document.markform['cmarked[]'])

{

for (i = 0; i < document.markform['cmarked[]'].length; i++)

{document.markform['marked5[]'].checked = true ;}

}

if (document.markform['cmarked1[]'])

{

for (i = 0; i < document.markform['cmarked1[]'].length; i++)

{document.markform['cmarked1[]'].checked = true ;}

}

if (document.markform['cmarked2[]'])

{

for (i = 0; i < document.markform['cmarked2[]'].length; i++)

{document.markform['cmarked2[]'].checked = true ;}

}

if (document.markform['cmarked3[]'])

{

for (i = 0; i < document.markform['cmarked3[]'].length; i++)

{document.markform['cmarked3[]'].checked = true ;}

}

if (document.markform['cmarked4[]'])

{

for (i = 0; i < document.markform['cmarked4[]'].length; i++)

{document.markform['cmarked4[]'].checked = true ;}

}

}

 

function uncheckAll(field)

{

if (document.markform['marked[]'])

{

for (i = 0; i < document.markform['marked[]'].length; i++)

{document.markform['marked[]'].checked = false ;}

}

if (document.markform['marked1[]'])

{

for (i = 0; i < document.markform['marked1[]'].length; i++)

{document.markform['marked1[]'].checked = false ;}

}

if (document.markform['marked2[]'])

{

for (i = 0; i < document.markform['marked2[]'].length; i++)

{document.markform['marked2[]'].checked = false ;}

}

if (document.markform['marked3[]'])

{

for (i = 0; i < document.markform['marked3[]'].length; i++)

{document.markform['marked3[]'].checked = false ;}

}

if (document.markform['marked4[]'])

{

for (i = 0; i < document.markform['marked4[]'].length; i++)

{document.markform['marked4[]'].checked = false ;}

}

if (document.markform['cmarked[]'])

{

for (i = 0; i < document.markform['marked5[]'].length; i++)

{document.markform['cmarked[]'].checked = false ;}

}

if (document.markform['cmarked1[]'])

{

for (i = 0; i < document.markform['cmarked1[]'].length; i++)

{document.markform['cmarked1[]'].checked = false ;}

}

if (document.markform['cmarked2[]'])

{

for (i = 0; i < document.markform['cmarked2[]'].length; i++)

{document.markform['cmarked2[]'].checked = false ;}

}

if (document.markform['cmarked3[]'])

{

for (i = 0; i < document.markform['cmarked3[]'].length; i++)

{document.markform['cmarked3[]'].checked = false ;}

}

if (document.markform['cmarked4[]'])

{

for (i = 0; i < document.markform['cmarked4[]'].length; i++)

{document.markform['cmarked4[]'].checked = false ;}

}

}

 

</script>

 

 

</head>

 

<body>

<form name="markform" method="post" action="">

<table width="675px" cellpadding="2" cellspacing="0" >

                <tr class="tableheader"><td><h4 class="header"> Chores from 3 Weeks Ago</h4></strong></td><td><center><h4 class="header">M</h4></center></td><td><center><h4 class="header">T</h4></center></td><td><center><h4 class="header">W</h4></center></td><td><center><h4 class="header">Th</h4></center></td><td><center><h4 class="header">F</h4></center></td><td><center><h4 class="header">Sa</h4></center></td><td><center><h4 class="header">Su</h4></center></td></tr>

                <tr style="background-color: #8cccd3;"><td>  Brush teeth</td><td></td><td><center><input type="checkbox" name="marked3[]" value="0" /></center></td><td><center><input type="checkbox" name="marked3[]" value="1" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #addce1;"><td>  Clean back yard</td><td></td><td></td><td></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #8cccd3;"><td>  Do your homework</td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td></td></tr><tr style="background-color: #addce1;"><td>  Empty the trash cans</td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td></tr><tr style="background-color: #8cccd3;"><td>  Feed the family pets</td><td><center><input type="checkbox" name="marked3[]" value="18" /></center></td><td><center><input type="checkbox" name="marked3[]" value="19" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #addce1;"><td>  Wash the dishes</td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #8cccd3;"><td>  Make the bed</td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #addce1;"><td>  Play an instrument (1hr)</td><td></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td></td><td></td><td></td></tr><tr style="background-color: #8cccd3;"><td>  Go to sports practice</td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td></td><td></td></tr><tr style="background-color: #addce1;"><td>  Prepare a meal</td><td></td><td></td><td></td><td></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td></tr><tr style="background-color: #8cccd3;"><td>  Brush your hair</td><td><center><input type="checkbox" name="marked3[]" value="40" /></center></td><td><center><input type="checkbox" name="marked3[]" value="41" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr><tr style="background-color: #addce1;"><td>  Clean your bedroom</td><td></td><td></td><td></td><td></td><td></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td></tr></tr><tr style="background-color: #8cccd3;"><td>  Bark at the moon</td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_faded.png" /></center></td><td><center><img src="images/checkbox_checked_faded.png" /></center></td><td><center><input type="checkbox" name="cmarked4[]" value="5" /></center></td></tr></table>

 

                <br />

 

               

                <img src="images/btn_check_all.png" onClick="checkAll()" /> <img src="images/btn_uncheck_all.png" onClick="uncheckAll()" /></form>

 

</body>

</html>

 

 

Link to comment
https://forums.phpfreaks.com/topic/255734-check-all-button-for-checkboxes/
Share on other sites

I just realized that neither the Check All or Uncheck All buttons work if the array, as in 'cmarked4[], only has one index.  The array must have at least two indexes, or else these buttons don't work.  How do I get around this?

Figured it out ...

 

Changed this:

 

if (document.markform['cmarked4[]'])

{

for (i = 0; i < document.markform['cmarked4[]'].length; i++)

        {document.markform['cmarked4[]'].checked = true ;}

}

 

To this:

 

if (document.markform['cmarked4[]'])

{

if (document.markform['cmarked4[]'].length > 0)

{

for (i = 0; i < document.markform['cmarked4[]'].length; i++)

{document.markform['cmarked4[]'].checked = true ;}

}

else

{document.markform['cmarked4[]'].checked = true ;}

}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.