Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Checkbox action

  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Checkbox action

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Or you can just say in the script:
    Code:
    window.onload = showHide;
    Software and cathedrals are much the same - first we build them, then we pray.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •