Checkbox action

mikeyhoward · 09-16-2009, 08:04 PM

Hi all,

Can anyone point me in the right direction for some sample code that when the selection on a checkbox changes, either writes or removes some content?

In this instance, when the checkbox is unchecked, I want more table rows and columns written with the relevant data within them. Then when checked, I want this data removed.

Many thanks

Philip M · 09-16-2009, 08:56 PM

Like so:-

Code:

<input type = "checkbox" name = "chk1" id = "chk1" checked onclick = "showHide()">

<div id = "div1" style="display:block">Content Here</div>

<script type = "text/javascript">

function showHide() {
if (document.getElementById("chk1").checked == false) {
document.getElementById("div1").style.display="block";
}
if (document.getElementById("chk1").checked == true) {
document.getElementById("div1").style.display="none";
}
}

</script>

Naturally you can give an id to the table rows.

Quizmaster: Three stumps with two bails on top are essential equipment in which sport?
Contestant: Horse racing.

Old Pedant · 09-16-2009, 09:43 PM

I kind of hate doing this to Philip, but...

Code:

function showHide() 
{
    document.getElementById("div1").style.display =
       document.getElementById("chk1").checked ? "block" : "none";
}

[Actually, I enjoy it tremendously, but sadists aren't supposed to admit they are.]

It does occur to me that he said "rows", which I take to mean <tr> rows in a <table>. And if there is more than one, they you'd need to repeat the code for each one:

Code:

function showHide() 
{
    var showhide = document.getElementById("chk1").checked ? "block" : "none";
    document.getElementById("row1").style.display = showhide;
    document.getElementById("row2").style.display = showhide;
    document.getElementById("row3").style.display = showhide;
}

Which assumes you have done

Code:

<table ...>
   ...
   <tr id="row1">....</tr>
   <tr id="row2">....</tr>
   <tr id="row3">....</tr>
   ...

If it's more than a handful or rows, I'd run a loop of some kind.

mikeyhoward · 09-16-2009, 10:05 PM

Thanks guys, works perfectly when I actually click the checkbox to uncheck and check, however the default value is checked but when the page initially loads, the table rows are displayed. Of course these rows should only appear when the checkbox is unchecked.

Any ideas?

Old Pedant · 09-17-2009, 02:45 AM

just change the default style to display: none.

Either add <tr id="row1" style="display: none;"> or make it part of your <style>.

And if the rows should appear when the box is *UNCHECKED*, then reverse the sense of my code. i.e.,

Code:

var showhide = document.getElementById("chk1").checked ? "none" : "block";

Sorry for misreading your post.

ckeyrouz · 09-17-2009, 02:52 AM

Or you can just say in the script:

Code:

window.onload = showHide;

Old Pedant · 09-17-2009, 07:12 PM

Yeah, I like CKey's answer better. Means that you could control the starting appearance by just changing the default of the checkbox, which is a pretty likely thing to do if, for example, you are generating the HTML from server-side code.