Solved

Show hide button

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

760 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

19 Experts available now in Live!

Get 1:1 Help Now