Solved

Show hide button

Posted on 2011-02-22
4
287 Views
Last Modified: 2012-05-11
I am trying to write a form with two buttons, "Add" and "Check All/Uncheck All". I have written it with three buttons (see code). How can I show/hide the other button of the "Check All" or "Uncheck All" buttons?
<SCRIPT LANGUAGE="JavaScript">
function checkAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = false ;
}
</script>

<table ID="LibraryTable"  width="100%" style="padding:10px;"><tr  >
<div class="NewsTitle">My <%=rs.recordcount%> Email Alerts</div>
<% ' Alerts Set
   d = 1
  do until rs.eof  
ident = Replace(Replace(rs("ident"),"{",""),"}","")' used to count files in folder 


   ' SQL = "SELECT ID FROM "&newsData&" WHERE cast(parentID as varchar(50))='" &ID& "'"
'Set rsx = Server.CreateObject("ADODB.RecordSet")
'rsx.CursorLocation = 3 ' adUseClient
''Response.Write "<br>" & sql & "<br>"
'rsx.Open SQL, dataConn

   cellString_d = Response.Write("<td align=""left"" style=""width:250px""  >")
   Response.Write ("<form name=""form1"" method=""post""  >")
   Response.Write ("<table><tr><td valign=""top"">")
   Response.Write ("<input type=""CheckBox"" name=""ident"" id=""MyAlertsGroup1_1"" value="&ident&" />")
   Response.Write ("</td><td>"&Left(rs("Name"),50)&"&nbsp;&nbsp;<br></td></tr></table>")
   Response.Write("</td>")

    if not d mod 3  = 0 then
      response.write(cellString_d)	 
    else
      response.write(cellString_d)%>
    <tr>
    <%
    end if		

    d = d + 1
    rs.movenext
    loop

%>
</table>
<input type="submit" name="deleteAlert" id ="deleteAlert" value="Delete" />
<input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.form1.ident)">
  <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.form1.ident)">
</form>

Open in new window

0
Comment
Question by:glstephens08
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 

Expert Comment

by:smithjasonuk
ID: 34956519
1.give the page an onload function.

2. Hide the "uncheck all" button by giving it an ID and using the onload function to hide it:

document.getelementbyid('uncheckID').style.visibility = 'hidden';

3. give the "Check all" button an ID. Then using your CheckAll function add:

document.getelementbyid('CheckID').style.visibility = 'hidden';
document.getelementbyid('uncheckID').style.visibility = 'visable';

4. Make sure you add the opposite to the uncheckAll function to do the reverse for displaying the checkall button.


Or just look at jQuery. Its just the same but far neater.
0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 34958871

Are you after this sort of logic:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26840279.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>

$(function() {

  $("#all").click( eventAll );
  $("#none").click( eventNone );
  $("#none").hide();
  $(".selections").click( eventClick );

});

function eventClick() {
  var quantity = $(".selections").length;
  var checked = $(".selections:checked").length;
  $("#none").show();
  $("#all").show();
  if ( checked == 0 ) {
    $("#none").hide();
  }
  if ( checked == quantity ) {
    $("#all").hide();
  }
}

function eventAll() {
  $(".selections").each( function() { this.checked = true; });
  $("#all").hide();
  $("#none").show();
}

function eventNone() {
  $(".selections").each( function() { this.checked = false; });
  $("#all").show();
  $("#none").hide();
}

</script>
</head>
<body>

<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />
<input type="checkbox" class="selections" /> <br />

<input id="all" type="button" value="All" />
<input id="none" type="button" value="None" />

</body>
</html>

Open in new window

0
 

Author Comment

by:glstephens08
ID: 34962536
Proculopiis,

I read through the code, and have a couple of question, but it seems close. I have five sections of the page that repeat almost the same code. The SQL differs slightly, but the checkbox lists are looped through so each section is built from  its one SQL staement. The first is a delete list the rest are add lists. The checkboxes are never hidden, the checked checkboxes are grayed out in the four add lists if they are in the delete list. The only thing I want to hide is either the "Check All" button or "Uncheck All" button, with the starting state as "Check All" for each add list section. I have another loop created to complete the "Add" or "Delete" button onclick event for each selected. So the only thing I need is onclick event of the "Check All" or "Unchecked All" I need a function that "show/hides" the other button and sets off the fucntion "Check All" or "Unchecked All"() I have in the javascript I included for checking or unchecking all the boxes.

Function(), Function eventAll(), Function eventNone(), but I don't understand the need for function eventClick() nor do I understand it. Please explain what it does or with the further explanation if it needed?
0
 

Author Closing Comment

by:glstephens08
ID: 34965660
Thanks figured out the middle once I got it working.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress and Wufoo 1 39
replacing inline javascript with jquery 4 45
Jquery Ajax - on change event not being picked up 9 28
Problem in javascript 17 23
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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