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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selecting/unselecting checkboxes changes button properties.

    Hi All,
    I must write a code for changing link/button properties depending on whether the checkbox is selected or not. I would like to have a box frame, if I select checkbox and frame should disappear when checkbox is not selected. Checkboxes are in the table and select any checkbox should change button properties.
    Below I've included the code that I have written but I do not know how to change it to work.
    Please help
    Thanks

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    window.onload = function () {
        var checkboxes = document.getElementsByTagName('input');
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == "checkbox") {
                checkboxes[i].addEventListener('change', function () {
                    var links = document.getElementsByTagName('a');
                    for (var a = 0; a < links.length; a++) {
                        console.log(links[a].className.indexOf("hi"));
                        if (links[a].className.indexOf("hi") > -1) {
                            links[a].className += " pressed";
                        } else {
                            links[a].className.replace(/ *pressed/, "");
                        }
                    }
                });
            }
        }
    }
    </script>
    <style>
    a.pressed { border: 1px dashed red; }
    </style>
    </head>
    <body>
    <input type="checkbox" name="a">
    <input type="checkbox" name="b">
    <input type="checkbox" name="c">
    
    <a href="#" class="hi">test 1</a>
    <a href="#">asdf</a>
    <a href="#" class="hi">test 2</a>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems a little strange, what you are trying to do, but maybe this is a start:
    Code:
    <script>
        var checkboxes = document.querySelectorAll('input[type=checkbox]');
        for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].addEventListener('click', function () {
    			var cb=this;
                    var links = document.getElementsByTagName('a');
                    for (var a = 0; a < links.length; a++) {
                        console.log(links[a].className.indexOf("hi"));
    					
                        if (links[a].className.indexOf("hi") > -1 && cb.checked) {
                            links[a].className += " pressed";
                        } else {
                            links[a].className=links[a].className.replace(" pressed", "");
                        }
                    }
                });
        }
    
    </script>


  •  

    Posting Permissions

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