Solved

Checkboxes - CheckALL within a Table

Posted on 2014-12-28
23
84 Views
Last Modified: 2014-12-30
I have a form which includes a section with checkboxes. The checkboxes are in a table. Each checkbox has a unique name. The data is eventually sent to a database and as an email message. I want to have an option for the checkboxes to CHECKALL (starting line 70). Is it possible to do this within the table and maintain my unique field names?

Code is included
<!DOCTYPE html>
<!-- #Include Virtual="CodeReuse/ConnComparisonChartTesting.inc" -->


<%
title = "Request Form"

dim ChartID
ChartID = session("ChartID")

%>


<html>

<head>

<link rel=stylesheet type="text/css"
  href="CodeReuse/style.css">


<style type="text/css">
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
</style>


</head>



<!-------------------------------------------------------------------------------------------->
<!------------------------------------ Continue the code ------------------------------------->
<title><%=title%></title>

<body>

<h2><%=title%></h2>  



<form method="POST" action="Eligible2.asp" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1" language="JavaScript">



<!-------------------------------------------------------------------------------------------->
<!----------------------------- REQUESTOR'S PERSONAL INFORMATION ----------------------------->

<p><b>First Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="First_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="250" -->
<input name="LSRequestorsFName" type="text" size="75" maxlength="250"></p>
  
<p><b>Last Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="Last_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="255" -->
<input name="LSRequestorsLName" type="text" size="75" maxlength="255"></p>
  
<p><b>Email:&nbsp;</b>
<!--webbot bot="Validation" s-display-name="Email" b-value-required="TRUE" i-minimum-length="5" -->
<input name="LSRequestorsEmail" type="text" size="50"></p>

<p><b>Phone Number:&nbsp;</b>
<input name="LSRequestorsPhone" type="text" size="50"></p>

<hr>
<b>Subject of Search (describe in detail):</b><br>
	<textarea rows="2" name="LSQuestion" cols="75"></textarea>

<p><b>Categories:</b></p>
	<blockquote>
		<table style="width: 600px">
			<tr>
				<td valign="top" style="width: 300px" class="style1">
					<input type="checkbox" value="1" name="LSCatHuman">Human<br>
					<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
					<input type="checkbox" value="1" name="LSCatFemale">Female<br>
					<input type="checkbox" value="1" name="LSCatMale">Male
				</td>
				
				<td style="width: 300px" class="style1">
					<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
					<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
					<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
					<input type="checkbox" value="1" name="LSCatAdult44">Middle Age (44-64 years)<br>
					<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
				</td>
			</tr>
		</table>
	</blockquote>




<!------------------------------------ TIME TO SUBMIT ------------------------------------>

<hr>
<input type="hidden" name="LSSubmitDate" value="<%=Date()%>">
<input type="hidden" name="ChartID" value="<%=session("ChartID")%>">
<input type="submit" value="Submit Request">
<input type="reset" value="Clear">


<p>&nbsp;</p>


</form> 

</body>


</html>

Open in new window

0
Comment
Question by:Malloy1446
  • 11
  • 10
  • 2
23 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40521239
line 72 : <table style="width: 600px" id="mytable">
you checkall checkbox : <input type="checkbox" id="checkboxAll" />

put the following in head section :
<script>
window.onload = function() {
   document.getElementById("checkboxAll").onchange = function() {
        var isChecked = this.checked;
        var checkboxes = document.getElementById("mytable").getElementsByTagName("input");
        for(var i=0;i<checkboxes.length;i++) {
           if(checkboxes[i].type == "checkbox") {
               checkboxes[i].checked = isChecked;
           }
        }
   }
}
</script>

Open in new window

Instead, if you've jQuery :
<script>
jQuery(function($) {
     $("#checkboxAll").change(function() {
          $("#mytable :checkbox").attr("checked", $(this).is(":checked"));
     });
});
</script>

Open in new window

0
 

Author Comment

by:Malloy1446
ID: 40521272
I added the script in the Header as posted.

I added the id to the table:
            <table style="width: 600px" id="mytable">

I added the id to each of the checkboxes:
            <input type="checkbox" value="1" name="LSCatHuman" id="checkboxAll" />Human<br>

I needed a checkbox for the CheckALL option so added the following:
            <input type="checkbox" id="checkboxAll" />Check All

When I try checking the CheckAll check box, it does nothing.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40521655
I added the id to each of the checkboxes:

no, add it to the checkall checkbox only...
<input type="checkbox" id="checkboxAll" />Check All
0
 

Author Comment

by:Malloy1446
ID: 40521807
Still is not checking all the boxes!
Checked IE and Firefox, neither one are checking all the boxes when I check "CheckAll"

Table line code:
    <table style="width: 600px" id="mytable">

My options are coded:
    <input type="checkbox" value="1" name="LSCatHuman">Human<br>

My checkall box:
    <input type="checkbox" id="checkboxAll" />Check All
0
 
LVL 24

Expert Comment

by:lenamtl
ID: 40521826
Hi,

I'm using this for javascript code
$('#selectAll').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});

Open in new window


and this for the checkbox
<tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>Select All</th>
    </tr>

Open in new window

0
 

Author Comment

by:Malloy1446
ID: 40521862
Are you replacing your original script with just the 3 lines?


I tried replacing and am using your code for the checkbox ALL, still not working.
0
 
LVL 24

Expert Comment

by:lenamtl
ID: 40521880
Hi,

I think you got confused.
I proposed you a different script, so make sure previous script regarding check all is commented // or removed.
Add the javascript code I posted and edit the <th> for the select all checkbox on your table
The javascript code need to be place between <script> </script> tags let say in the <head> </head> part of your page.

Check a working example:
http://jsfiddle.net/arunpjohny/bzpBB/

if it's not working after that check using chrome dev tool or Firefox dev tool if you have an error this will help.
0
 

Author Comment

by:Malloy1446
ID: 40521981
I looked at the Firefox dev tool and tried to debug but it did not find any errors.

The checkall does not work in either IE or Firefox. Your example is working on fiddle.
I am attaching the code again to see if you can see the error, I sure can't and it is frustrating (as I am sure it is for you!)

<!DOCTYPE html>
<!-- #Include Virtual="CodeReuse/ConnComparisonChartTesting.inc" -->


<%
title = "Request Form"

dim ChartID
ChartID = session("ChartID")

%>


<html>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<link rel=stylesheet type="text/css"
  href="/CodeReuse/style.css">


<style type="text/css">
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style2 {
				font-weight: bold;
}
</style>


<!-- Check all CHECKBOXES function -->

<script>
$('#selectAll').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});
</script>


</head>



<!-------------------------------------------------------------------------------------------->
<!------------------------------------ Continue the code ------------------------------------->
<title><%=title%></title>

<body>

<h2><%=title%></h2>  

<b>Location: VISN <%=session("VISNID")%> -- <%=session("FacName")%> (<%=session("City")%>, <%=session("State")%>)</b>



<!-------------------------------------------------------------------------------------------->

<br>


<%
'response.Write("chartID: " & session("ChartID"))
'response.End()
%>

<hr>



<form method="POST" action="Eligible2.asp" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1" language="JavaScript">



<!-------------------------------------------------------------------------------------------->
<!----------------------------- REQUESTOR'S PERSONAL INFORMATION ----------------------------->

<p><b>First Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="First_Name" b-value-required="TRUE" i-minimum-length="2" i-maximum-length="250" -->
<input name="LSRequestorsFName" type="text" size="75" maxlength="250"></p>
  
<p><b>Last Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="Last_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="255" -->
<input name="LSRequestorsLName" type="text" size="75" maxlength="255"></p>
  
<p><b>Service:&nbsp;</b>
<input name="LSRequestorsService" type="text" size="75"></p>

<p><b>Email:&nbsp;</b>
<!--webbot bot="Validation" s-display-name="Email" b-value-required="TRUE" i-minimum-length="5" -->
<input name="LSRequestorsEmail" type="text" size="50"></p>

<p><b>Phone Number:&nbsp;</b>
<input name="LSRequestorsPhone" type="text" size="50"></p>

<!-------------------------------------------------------------------------------------------->
<!----------------------------- SEARCH REQUEST DETAILS---------- ----------------------------->

<hr>
<b>Subject (describe in detail):</b><br>
	<!--webbot bot="Validation" s-display-name="Subject of Literature Search" b-value-required="TRUE" i-minimum-length="10" -->
	<textarea rows="2" name="LSQuestion" cols="75"></textarea>

<p><b>Language:</b>&nbsp;
	<input type="radio" value="English" name="LSLanguage">English&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" value="ALL Languages" name="LSLanguage">ALL Languages&nbsp;&nbsp;&nbsp;&nbsp;
	<b>Specify Languages: </b>
		<input name="LSLanguageCust" type="text" size="50"></p>


<p><b>Categories:</b></p>
	<blockquote>
		<table>
			<tr>
				<th><input type="checkbox" id="selectAll" />Check All</th>
			</tr>
				
			<tr>
				<td>
					<input type="checkbox" value="1" name="LSCatHuman">Human<br>
					<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
					<input type="checkbox" value="1" name="LSCatFemale">Female<br>
					<input type="checkbox" value="1" name="LSCatMale">Male<br>
					<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
					<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
					<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
					<input type="checkbox" value="1" name="LSCatAdult44">Middle Age (44-64 years)<br>
					<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
				</td>
			</tr>
		</table>
	</blockquote>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522078
0
 

Author Comment

by:Malloy1446
ID: 40522367
OK!!!  

Works in FireFox but not IE!
I really need it to work in IE also.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522374
work fine on ie 9,10,11 and 12
did you cleared your cache?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Malloy1446
ID: 40522422
Cleared cache.
Restarted IE9.
Still not working....
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522425
the jsfiddle or your integration ?
0
 

Author Comment

by:Malloy1446
ID: 40522457
Viewing jsfiddle with IE9, the checkbox all works.

Opening the actual page on IE9, it does NOT work.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522463
and without the code, you don't see any error (yellow triangle with exclamation mark) in the actual page? (
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522467
my first post :

line 72 : <table style="width: 600px" id="mytable">
you checkall checkbox : <input type="checkbox" id="checkboxAll" />
0
 

Author Comment

by:Malloy1446
ID: 40522578
OK... this is strange. I moved the check all box.
When I click Check All, notthing happens,
If CHECK ALL is checked and I check HUMAN (the first checkbox) they all become checked except Human.
If CHECK ALL is NOT checked and I check HUMAN only Human is checked.


<p><b>Categories:</b></p>
	<blockquote>
		<table style="width: 600px" id="mytable">
		<tr>
		<td valign="top" style="width: 300px" class="style1">
		<input type="checkbox" id="checkboxAll">Check All<br>
		<input type="checkbox" value="1" name="LSCatHuman">Human<br>
		<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
		<input type="checkbox" value="1" name="LSCatFemale">Female<br>
		<input type="checkbox" value="1" name="LSCatMale">Male<br>
		<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
		<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
		<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
		<input type="checkbox" value="1" name="LSCatAdult44">Adult (19-44 years)<br>
		<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
		</td>
			</tr>
		</table>
	</blockquote>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40522610
http://jsfiddle.net/ad10Lfhn/5/

window.onload = function() {
   document.getElementById("checkboxAll").onchange = function() {
        var isChecked = this.checked;
        var checkboxes = document.getElementById("mytable").getElementsByTagName("input");
        for(var i=0;i<checkboxes.length;i++) {
           if(checkboxes[i].type == "checkbox" && checkboxes[i].id != "checkboxAll") {
               checkboxes[i].checked = isChecked;
           }
        }
   }

Open in new window

0
 

Author Comment

by:Malloy1446
ID: 40522646
Same thing!  
Still works on FireFox
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522648
share a link to your page or build an exact test page somewhere
0
 

Author Comment

by:Malloy1446
ID: 40522733
I am unable to share a link, everything is behind a firewall.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522735
share a link to your page or build an exact test page somewhere
0
 

Author Comment

by:Malloy1446
ID: 40523693
I copied the page to a different site and it does work fine with IE9
     http://www.dianefitzgerald.com/_Test/Eligible.asp

Now I will need to figure out what is wrong with the site hosting the website where I need the file.

Thank you for sticking with this.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now