ansaurus

Question

Javascript: Change li class if checkbox is selected (on load)

Answer 1

+1 A:

Looks like you're using the wrong id to reference the LI within the anchor's onclick handler, try:

document.getElementById('selectedAuthorities-4_1li').click();

karim79 2010-05-12 13:38:30

I have it onclick already, check html. I need an example to update my JS to check onLOAD if the checkbox is checked and in that case, do className='yes'

BoDiE2003 2010-05-12 13:43:11

Answer 2

A:

There are two ways to go about dealing with this very common situation:

Initialize the class with server-side logic according to the server-side data that drives the setting of the checkbox. Sometimes this is easy, sometimes it isn't.
Drop in a little <script> block that triggers the "click" operation. That's sort-of a pain because you want to trigger the click without the checkbox toggling; exactly how you do that depends on the way your events are set up in general, but in your case it really just has to call the function.

Your "changeSelectionStyle" function really should be making the decision of what the class name should be by first inspecting the checkbox directly, in my opinion. Perhaps the checkbox "checked" setting could be a separate parameter to the function.

Pointy 2010-05-12 13:40:44

Answer 3

A:

You are using onload on an input element which is not a valid event for that type of element. You will need to use the onload on the body element:

<body onload="changeSelectionStyle('selectedAuthorities-4_1li');">

Obviously in your real app you'll have to loop for all your LI. Using jQuery for this would make it much simpler

SBUJOLD 2010-05-12 13:46:39

Answer 4

A:

This is the ugliest piece of code I've written since the time I switched to jQuery:

function update_checkbox() {
    if (document.getElementById('selectedAuthorities-4_1li').checked) {
        document.getElementById('selectedAuthorities-4_1li').parentNode.className = 'yes';
        // or use your changeSelectionStyle() 
    }
}
CrossAttachEvent(window, 'load', update_checkbox);
function CrossAttachEvent(o, e, f) {
    if (o.addEventListener) {
        o.addEventListener(e, f, false);
    }
    else if (o.attachEvent) {
        o.attachEvent("on" + e, f);
    }
}

CrossAttachEvent is a function I "derived" from an example on the web. It is supposed to be a cross-browser function for appending events to objects, in this case, onload event of the window.

Salman A 2010-05-12 13:47:06

I have it onclick already, check html. I need an example to update my JS to check onLOAD if the checkbox is checked and in that case, do className='yes' –

BoDiE2003 2010-05-12 13:50:39

I modified my answer.

Salman A 2010-05-13 06:20:21

ansaurus

tags:

views:

answers:

Javascript: Change li class if checkbox is selected (on load)

related questions