If checkbox is checked this class?

[AndrewGSW]

Quote: "a journey of a thousand miles begins with a single step"

[MrTIMarshall]

Originally Posted by AndrewGSW

Quote: "a journey of a thousand miles begins with a single step"

I don't even know the first step, lols.

I understand that this:

var ckbs = document.getElementsByTagName('input');
for (var i=0; i < ckbs.length; i++) {
    if (ckbs[i].type == 'checkbox') {
        // do something 
    }
}

is calling to all checkboxes on the page, however I need to change the, lets sayfor example if Obj2012-Check is checked then Obj2012 class needs to change but if Obj2011-Check is checked then Obj2011 call needs to change

[AndrewGSW]

var ckbs = document.getElementsByTagName('input');
for (var i=0; i < ckbs.length; i++) {
    if (ckbs[i].type == 'checkbox') {
        if ((ckbs[i].id).indexOf('Obj') + 1) {
            // that is, if the id includes 'Obj' 
            // you'll need other string functions if you have to check 
            // other parts of the id
            if (ckbs[i].checked) {
                ckbs[i].className = "wibble";
            } // else: see a previous post of mine
        }
    }
}

[AndrewGSW]

Or use

if ((ckbs[i].id).indexOf('Obj') == 0) {

if the id will start with 'Obj'.

[MrTIMarshall]

I implemented this into my page, howver it does not work and yes I did change the class name to the correct class 'Done'.

[Old Pedant]

What's the new URL?

Let's just throw out your old code and do it again, maybe?

[MrTIMarshall]

https://tornhq.com/Events/HallowTown...ml#view_quests

[Old Pedant]

Okay, the problem is that you are *NOT* dealing with an ordinary checkbox.

Since you are using that checkbox.js code, *it* is taking over the onclick method of your checkboxes! So anything you try to add to *also* handle the onclick's is going to either (a) interfere with the checkbox.js code or (b) OVERWRITE the checkbox.js code or (c) get itself overwritten by the checkbox.js code.

The most practical things to do to fix this are either (a) stop using checkbox.js and write your own equivalent code or (b) modify checkbox.js to also change the class upon the onclick.

Which do you choose?

[MrTIMarshall]

To be honest, I do not even know how the checkbox.js works so I won't be able to program my own, well, at this moment in time anyway.

There are also quite a lot of these to implement. I'll go for your best option though as you have helped so much and are more experienced in the field.

[Old Pedant]

Personally, I feel that checkbox.js code is needlessly overcomplicated. I'd prefer to rip it out and write my own.

Do you *care* that a person without JavaScript would then see ordinary checkboxes, as with checkbox.js? Of course not. Your page won't even BEGIN to run without JS.

So let me toss out checkbox.js and make it tons simpler.

Why do you want class to change because of checked, by the by?

[Old Pedant]

Originally Posted by MrTIMarshall

There are also quite a lot of these to implement.

A lot of what? checkboxes?

[MrTIMarshall]

Yes, there are 3 sub-categories with a total of 60 things to do for the 2012 objectives and I've not yet found reliable sources for the other years.

[Old Pedant]

Okay...but now answer me: What is the reason you want to change the class of the checkbox when it is checked??

[MrTIMarshall]

To symbolize that they have done them.

• Red means uncompleted
• Orange means they've started.
• Green means they've completed

This will lead on to showing the markers on the map. If they've not checked that they have completed 2011 for example or not checked everything in-side to auto-check the 2011 objectives, the 2012 objectives will not show on the map as they don't be available.

I'm hoping once I know a basic of both, the showing of images on the map and these checkboxes I can get started on doing loads myself. There are some big array's for myself to complete and quite a lot of research to try and find the previous years objectives although these do not get removed and you do a continuation, these should be easy to find but aren't as the help websites out there are rubbish, hence why I am working on this and meant to be working on other things.

[AndrewGSW]

I know that OldPedant is on the case , but if it is useful to you below is what I have used for a check/tick box and I've attached small images.

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="key, words">
    <meta name="description" content="description">
    <title>Check It</title>
    <style type="text/css">
    label {
        display: block;
        margin-top: 2px; margin-bottom: 2px;
    }

    label.checking input[type=checkbox] {
        display: inline;
        width: 1.2em;
        vertical-align: middle;
        outline: none;
        opacity: 0;
        width: 18px; height: 18px;
        margin: 0 0 0 8px; padding: 0;
        z-index: 10;
    }
    span.checking {
        margin: 0;
        padding: 0 0 0 18px;
        position: relative; left: -18px;
        z-index: 5;
        height: 18px;
        background: url('images/checkblank.png') right center no-repeat;
    }
    label.checking input[type=checkbox]:checked + span {
        background: url('images/checktick.png') right center no-repeat;
    }

    </style>
</head>
<body>
<label class="checking">Remember me<input type="checkbox" id="remember" 
        name="remember" value="yes"><span class="checking"></span></label>
</body>
</html>

OPs work though is likely to be more specific to you.