Member Avatar for Eneswar

Hello, im trying to do a single html page with multiple checkboxes to hide/show text when checked/unchecked. I'm really bad at html but so far I have got this:
The problem I have is I dont know how to add more checkboxes.

Would appreciate some help.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>101st</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function setCookie(isName,nState){

var currState = nState ? '1' : '0';
document.cookie = isName+"="+currState;
nState ? document.getElementById('toggleDiv').style.display = '' : document.getElementById('toggleDiv').style.display = 'none';
}

function getCookie(isName){

var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
var isValue = cookieStr.substring(startSlice,endSlice).replace(/^.+\=/,"");
return isValue;
}

function init(){

var nForm = document.forms[0];
var nToggle = document.getElementById('toggleDiv');
var boxState = getCookie('toggleBox');
if (boxState == '1')
{
nForm['box1'].checked = true;
nToggle.style.display = "";
}
else {
nForm['box1'].checked = false;
nToggle.style.display = "none";
}
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:600px;margin:auto}
fieldset {width:580px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:tahoma;font-size:10pt;font-weight:bold;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;letter-spacing:+1px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>101st Space Marine Force</legend>

<input type="checkbox" name="box1" onClick="setCookie('toggleBox',this.checked)" /> Show Hide

<div id='toggleDiv' style='display:none'>
odasodasiodnd sad sad asd asd asd asd asd a 
as dasd asd asd asd asd ad 
</div>

</fieldset>
</form>


</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 553 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Eneswar
Member Avatar for Taywin

Hmm... I don't know why you need "Cookies" to do the show/hide here? You could simply check whether the checkbox value is checked or not to do the show/hide. Also, you need a separate script to add new checkbox elements. Do you know how to use document.createElement(TagName)?

Member Avatar for Eneswar

Sorry I forgot to update this thread.
Thanks for the reply Taywin but I figured it out. I removed the cookies functions because it would be pretty useless and from there I just had to do some brainstorming, works ok now :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.