javascript check box

Question

everybody! I want to do following: When clicked on check box one or more div tags must change their css-style. I have this little javascript:

function changeStyle(o) {
    if(o.checked) {
        document.getElementById(o.getAttribute("value")).setAttribute('class','on');
    }
    else {
        document.getElementById(o.getAttribute("value")).setAttribute('class','off')
    }
}

and the html is:

<input type="checkbox" onclick="changeStyle(this);" value="div1" />&nbsp;Div1<br />
<input type="checkbox" onclick="changeStyle(this);" value="div2" />&nbsp;Div2<br />
<input type="checkbox" onclick="changeStyle(this);" value="div3" />&nbsp;Div3<br />
<input type="checkbox" onclick="changeStyle(this);" value="div4" />&nbsp;Div4<br />
<input type="checkbox" onclick="changeStyle(this);" value="div5" />&nbsp;Div5<br />

<div id="div1" class="off">I'm in div 1</div><br />
<div id="div2" class="off">I'm in div 2</div><br />
<div id="div3" class="off">I'm in div 3</div><br />
<div id="div4" class="off">I'm in div 4</div><br />
<div id="div5" class="off">I'm in div 5</div><br />
<div id="div2" class="off">I'm in div 2</div><br />

But in this case when I have more than one div with the same id only the first div changes its style from .on to .off

How can I make so when I click on check box to change the css-style to all div tags with same id as the check box value?

Thank you in advance!

Kishore · Accepted Answer · 2011-12-09 19:48:12Z

1

id must always be unique instead if id use class attribute that must work something like this

> <div class="div1 off">I'm in div 1</div><br />

edited Dec 9, 2011 at 19:48

answered Dec 9, 2011 at 19:39

Kishore

1,9121 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ljubo Valevski Over a year ago

Is this correct use of getelement by class: function changeStyle(o) { if(o.checked) { document.getElementByClassName(o.getAttribute("value")).setAttribute('class','on'); } else { document.getElementByClassName(o.getAttribute("value")).setAttribute('class','off') } }

Ken White · Accepted Answer · 2011-12-09 20:18:07Z

1

Elements in the DOM shouldn't have the same id; they should always be unique. Consider giving the divs the same class, eg class="div1", etc. Then do getElementsByClassName on the checkbox value.

edited Dec 9, 2011 at 20:18

Ken White

126k15 gold badges237 silver badges476 bronze badges

answered Dec 9, 2011 at 19:37

tfcmaster9

1131 silver badge6 bronze badges

5 Comments

James Montagne Over a year ago

Agreed, but note .setAttribute('class','off') would overwrite these classes, so that will need to change. Also, I think getElementByClassName doesn't work in most IE versions.

tfcmaster9 Over a year ago

Good catch on the IE thing. I mostly stick with jQuery so I dont need to worry about browser compatability so I didnt realize that off hand.

Ljubo Valevski Over a year ago

So do you have any link with jquery decision of this problem?

tfcmaster9 Over a year ago

`function changeStyle(o){ var class = $(o).val(); if(class == "on") $("."+class).addClass("on").removeClass("off"); else $("."+class).addClass("off").removeClass("on"); }'

Ljubo Valevski Over a year ago

Can you write this on jsfiddle.net please?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

To change the css-style to all div tags. you must use classes not id's.
So change div id="div1" to div class="div1".
When you use an id, the browser will search for the ID, once it finds the FIRST id, it uses that AND STOPS searching, it doesnt not continue to look for more id's.
If you use classes, it will search the entire page for as many classes as it can find, then do whatever you want to EACH class..
So basically, change your id's to classes and everything should be fine.

Update
Here is a working JSFiddle:
Basically, first I changed the function name to lowercase (i dont know why, but "changeStyle" was not found in JSFiddle, but "changestyle" was.

BTW - Your ID's are fine, you dont need to replace them for classes. You function was just not being found.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 9, 2011 at 19:38

Anil

21.9k9 gold badges77 silver badges103 bronze badges

9 Comments

Ljubo Valevski Over a year ago

But when I use class for div so I cannot toggle their style when click on check box?

Ljubo Valevski Over a year ago

function changeStyle(o) { if(o.checked) { document.getElementByClassName(o.getAttribute("value")).setAttribute('class','on'); } else { document.getElementByClassName(o.getAttribute("value")).setAttribute('class','off') } } And then <div class="div1">I'm in div 1</div><br /> <div class="div1">I'm in div 2</div><br /> Still does not work

Anil Over a year ago

I just updated my answer with a JSfiddle. Check it out, its working as wanted.

Ljubo Valevski Over a year ago

I am checking the preview but it still does not toggle the last div witch is with same id as div 2?

Anil Over a year ago

Divid2, you will have to change to a class. You can only use a ID once, If you want to use it again, you HAVE to change it to a class, then use it as many times as you want, best bet is to change them all to a class so you can use the same function.

|

Collectives™ on Stack Overflow

javascript check box

3 Answers 3

1 Comment

5 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related