Change css inside function call not working

Question

I want to change css inside function call.ie, in my case add style to check box when function return true. But it is not working.

Script code ,

function checkAll()
{
    if ( document.myForm.myCB.length )
        {
            for (var x = 0; x < document.myForm.myCB.length; x++)
            {
                var flag=1;
                    if (flag == 1)
                    {
                        document.myForm.myCB[x].checked = true; 
                $('.checkbox').attr("style", "background-position:top left;");              
                    }
                    else 
                    {
                        document.myForm.myCB[x].checked = false;
                    }

            }
        }

}

Html code is,

   <form name="myForm" id="myForm" action="" method="get"> 

   <p><input type="button" name="ca_v1_on" value="Check All" onclick="checkAll(1);"/></p>
   <p> <input class="checkbox" type="checkbox" name="myCB" value="yes" id="myCB"/></p>

  <p><input class="checkbox" type="checkbox" name="myCB" value="yes" id="myCB"/></p>

  <p><input class="checkbox" type="checkbox" name="myCB" value="yes" id="myCB"/></p>
 </form>

please help.

thanks,

Mihai Iorga · Accepted Answer · 2012-09-08 12:12:20Z

use .css for jQuery:

$('.checkbox').css("background-position", "top left");

or simple javascript:

var elements = document.getElementsByClassName('checkbox');
for(var i = 0, length = elements.length; i < length; i++) {
     elements[i].backgroundPosition = 'top left';
}

Note that getElementsByClassName() is not available up to and including IE8.

You can get it working on all browsers, check this for some comparisions an good alternatives like:

if (!('getElementsByClassName' in document)) {
    document.getElementsByClassName = function(className, parentElement) {
        if (Prototype.BrowserFeatures.XPath) {
            var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
            return document._getElementsByXPath(q, parentElement);
        } else {
            var children = ($(parentElement) || document.body).getElementsByTagName('*');
            var elements = [],
                child;
            for (var i = 0, length = children.length; i < length; i++) {
                child = children[i];
                if (Element.hasClassName(child, className)) elements.push(Element.extend(child));
            }
            return elements;
        }
    };
}

Josh Mein · Accepted Answer · 2012-09-08 12:06:31Z

0

See this line:

$('.checkbox').attr("style", "background-position:top left;");

You could write it in this way :

$('.checkbox').css("background-position", "top left");

edited Sep 8, 2012 at 12:06

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

answered Sep 8, 2012 at 12:04

iNDicator

5342 gold badges7 silver badges15 bronze badges

Comments

Ivo · Accepted Answer · 2012-09-08 12:12:41Z

0

to change css you should use the .css and not the .attr

so this

$('.checkbox').attr("style", "background-position:top left;");

will make

$('.checkbox').css("background-position", "top left");

sported in all browsers with JavaScript if you want to make it different for browsers with out JavaScript take a look at modernizr

answered Sep 8, 2012 at 12:12

Ivo

2,6666 gold badges28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Change css inside function call not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related