lcscne
10-06-2003, 04:18 PM
flag = "checked";
function setTicks()
{
(document.myform.mybutton.value == "UnCheck All") ? document.myform.mybutton.value = "Check All" : document.myform.mybutton.value = "UnCheck All";
(flag == "checked") ? flag = "" : flag = "checked";
for (i=0; i<document.myform.elements.length; i++)
{
(document.myform.elements[i].type == "checkbox") ? document.myform.elements[i].checked = flag : "";
}
}
The select all toggle works great for un/checking all the checkboxes but for some reason the button value isn't toggling. I've checked and rechecked the names and all is well. Can anyone spot my problem?
Charles
10-06-2003, 04:31 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label {display:block; margin:1em 0em}
button {margin:1ex; width:5em}
-->
</style>
<form action="">
<div>
<label><input type="checkbox">Fee</label>
<label><input type="checkbox">Fie</label>
<label><input type="checkbox">Foe</label>
<label><input type="checkbox">Fum</label>
<script type="text/javascript">
<!--
document.write('<button>Check All</button>');
document.forms[0].elements[document.forms[0].elements.length-1].onclick = function () {
var checked = this.firstChild.data == 'Check All';
for (var i = 0; i < this.form.elements.length; i++) {if (this.form.elements[i].type == 'checkbox') this.form.elements[i].checked = checked};
this.firstChild.data = this.firstChild.data == 'Check All' ? 'Clear All' : 'Check All';
}
// -->
</script>
<button type="submit">Submit</button>
</div>
</form>
Did you lose your original thread? http://forums.webdeveloper.com/showthread.php?s=&threadid=18751
lcscne
10-07-2003, 07:37 AM
Hey Charles,
Why would the text in your text box not be centered. Its valigned to top. The script works well however this cosmetic thing irritates me, mainly because I can't figure it out myself. Thanks for your reply.
By the way I did use the styles you included too. Whats weird is that I copied your entire code into a new page and loaded it just fine (button text vertically centered), it just seems to be vertically aligned to top in my asp page.
OK I've nailed it down to the .css file I've linked to the page, however I don't see anything that would affect the text on a button, do you?
body
{
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699;
}
td, th
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 12px;
color: #000000;
}
a
{
font-size: 12px;
color: #336600;
}
form
{
background-color: #CCCC99;
}
.title
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 20px;
background-color: #99CC00; color: #003333;
}
.subtitle
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 30px;
color: #003300;
}
.header
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
background-color: #669900;
color: #FFFF33;
}
.nav
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
background-color: #CCFF99;
}
.navLink
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background-color: #DEDECA;
}
.sidebar
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 14px;
padding: 3px;
background-color: #FFFFCC;
color: #003333;
}
.sidebarHeader
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
color: #003300;
background-color: #FFFF66;
}
.sidebarFooter
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
background-color: #FFFF99;
font-style: italic;
}
.footer
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 22px;
color: #333333;
background-color: #CCFF99;
}
.legal
{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333333;
}
.box1
{
border-width: thin;
border-color: #99FF99 #003300 #003300 #99FF99;
border-style: double;
}
.promo
{
font-family: "Times New Roman", Times, serif;
color: #000033;
}
.titlebar
{
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #FFFFFF;
background-color: #336699;
}
.dingbat
{
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #660000; font-weight: bolder; font-size: medium;
}
input.big
{
width: 100px;
}
input.small
{
width: 50px;
}