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.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 55
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    If checkbox is checked this class?

    Hello,

    I need to know how to change a class of a checkbox if it is checked.

    https://tornhq.com/Events/HallowTown/checkbox.html

    The above is the start of what I'm doing. Each one has sub categories and they have things under them too. If any one is checked, I need the class to change.

    If a category is checked, it switches to the .done class. If a subcategory incide is checked, it'll switch to ornage, if all the sub categories are checked, it'll change to green. The same with the steps inside of the sub-categories of which have not been added yet.

    Best Regards,
    Tim

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    51
    Thanks
    2
    Thanked 0 Times in 0 Posts
    you need an event listener on your checkboxes. Something like this:

    Code:
    <td id="Obj2009" class="Not_Done" onchange='myfunction()'>2009 Objectives</td>
    Then you use javascript or some other scripting language to perform the task you want when that happens.

    A typical javascript function would be something like this (if you don't know how to insert js into your document there are a lot of good resources you can search for):

    Code:
    myfunction()
     {
     var ck2009 = document.getElementById('Obj2009'); //note js variables can't begin with numbers
     if (ck2009 = true)
      {
       ck2009.class = 'newclass';
      }
     else
      {
       ck2009.class = 'Not_Done';
      }
    You should also consider putting your checkboxes into a form.

    edit: Nevermind I see you've already got quite a bit of JS already to set the class, but there doesn't seem to be any change when you set it. What exactly is your question?

    edit2:
    Code:
     changeClass(document.getElementById("Obj2009"), this.checked ? 'Done' : 'Not-Done');
    Everywhere else you're using 'Not_Done' rather than 'Not-Done'. Is this what you're asking?
    Last edited by Prime8; 01-04-2013 at 06:01 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Sorry, it is meant to be '.Not_Done' class for those of which have not been checked meaning they have not yet done them.

    If they have done them, meaning they have checked them, they should then use the class of '.Done' to keep it simple for now.

    I'm just cleaning up my css and implementing it into the larger page as I was working on this separably for the time being. Once I have done so, I'll re-post here if I am in need, which I will most-probably do so, help on changing them to the class of '.Started'.

    Thank you for your help so far

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Essentially:

    Code:
    var ckb = document.getElementById('checkboxid');
    if (ckb.checked) {
        ckb.className = "Done";
    } else {
        ckb.className = "Not_Done";
    }
    If you need to work with a collection of checkboxes:

    Code:
    var ckbs = document.getElementsByTagName('input');
    for (var i=0; i < ckbs.length; i++) {
        if (ckbs[i].type == 'checkbox') {
            // do something 
        }
    }
    If the checkboxes are all contained within a form then the following is more efficient:

    Code:
    var frm = document.getElementById('frmid');
    var ckbs = frm.getElementsByTagName('input');
    Be aware, though, that your feature swaps spans for checkboxes.

    @Prime8: This is wrong:

    Code:
    myfunction()
     {
     var ck2009 = document.getElementById('Obj2009'); //note js variables can't begin with numbers
     if (ck2009 = true)
      {
       ck2009.class = 'newclass';
      }
     else
      {
       ck2009.class = 'Not_Done';
      }
    document.getElementById doesn't return true and it is 'className', not 'class'. AND you are assigning the value 'true' rather than comparing it.

    Also, a TD doesn't have a change event.
    Last edited by AndrewGSW; 01-04-2013 at 07:09 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If all your checkboxes have the same name then you could use getElementsByName().
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    https://tornhq.com/Events/HallowTown...ml#view_quests

    The checkboxes are now under the tab with the (?) image.

    I am having troubles aligning and not cutting off the checkboxes at the moment, but if you click on the [i]'s, they'll be set to show a new list.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Clicking the i's does nothing for me currently. Try this css:

    Code:
    td img {
        vertical-align: bottom;
    }
    BTW When working with checkboxes and similar form elements, I would not waste time trying to achieve pixel perfection; you'll find that they will still look slightly different in each browser. (It is possible to get them to behave, but it is a lot of hard work!!)
    Last edited by AndrewGSW; 01-04-2013 at 07:55 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    If your still under the same tab they should all be there and I have not yet made any other lists for the i's to yet work.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you also increase the height of the rows it looks better, I think:

    Code:
    tr { height: 17px; }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Are we seeing the same thing?

    I've tried what you've said, not regarding the class switch, of which I don't understand but nevertheless I can only see it working when teh .checkbox, .radio { height is 25px, but then this gives the whole thing big spacing between the tr's...

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The attached screenshot shows what I'm looking at, after the changes I mentioned to the css, but perhaps we are talking at cross-purposes.
    Attached Thumbnails Attached Thumbnails If checkbox is checked this class?-image-2.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Yes, that is how I'm seeing it with the bottom of the checkbox being cut off and the first and second-child of the td's being up more than the third.

    If you have a look again I have changed the hight style under .checkbox, .radio { to 25px which makes them all aligned but give the big gab in between.

  • #13
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Something also to do with the height is at the top of this js file;

    https://tornhq.com/js/checkbox.js

    I've tried editing the image, height in there, the css height... The only thing that removes most of the tr spacing is changing the css .checkbox height to 15px but then it cuts off the checkbox.

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by MrTIMarshall View Post
    Something also to do with the height is at the top of this js file;

    https://tornhq.com/js/checkbox.js

    I've tried editing the image, height in there, the css height... The only thing that removes most of the tr spacing is changing the css .checkbox height to 15px but then it cuts off the checkbox.
    I suppose you could try reducing:

    Code:
    var checkboxHeight = "25";
    in the JS but I suspect you will need to then reduce the size of your checkbox.png, and any other associated image(s).

    Not sure, sorry.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #15
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    I still don't understand how to use the provides code to change the text depending on if the checker box is checked or not.

    I'd guess there's going to be around 100 of these to do in total so instead of myself creating a massive code, of which I cannot even get one to work, I need to try and do something small...


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

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