Solved

Show hide button

Posted on 2011-02-22
4
285 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
  • 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
javascript: add id amounts 5 47
how can i test my code? 1 38
FileUp - Classic ASP 5 17
Else condition 9 19
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

777 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