Change CSS based on certain DIV content

Question

Hoping someone could help me with a bit of jquery or javascript. I have some DIV's that contain the values of a checkbox being either "1" or "0" depending on whether I check the box or not:

<div class="checkbox">1</div>   //This is when the checkbox is checked

<div class="checkbox">0</div>   //This is when the checkbox is NOT checked

The class for this DIV stays the same whether it is a 0 or a 1 so I need to have a conditional statement that says,

"If the contents of the DIV is 1 then show it"

AND

"If the contents of the DIV is 0, then hide it"

Would this be simple to do?

It would be better to give another class to each element, like "when-checked" for one and "when-not-checked" for the other. Having to look in the DOM at the contents is messy and slower (though performance probably won't be a real problem here). — Pointy
– Pointy, Commented Jan 15, 2013 at 17:46

Selvakumar Arumugam · Accepted Answer · 2013-01-15 17:42:34Z

3

A filter would come in handy for such case..

$('.checkbox').filter(function () {
   return $(this).text() == 0;
}).hide();

answered Jan 15, 2013 at 17:42

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

7 Comments

Chad Over a year ago

What if it changes after this filter runs

idrumgood Over a year ago

Put it inside a change listener like my answer. I'd combine mine and Vega's answers (though his deserves the Answer)

Alexander Over a year ago

@idrumgood, disagree. Yours doesn't run unless an event has been triggered

Dan Over a year ago

This works great thanks guys, I am noticing that the "0" shows up just briefly before the script runs and then it disappears. Is there anyway to stop that? I have the script at the bottom of the page...it doesn't work when placed at the top.

idrumgood Over a year ago

If you need it to run on page load AND when checkboxes change, then you're going to want to take this filter code, put it in a function, then call that function both on page load and on a change listener.

|

Alexander · Accepted Answer · 2013-01-15 17:43:06Z

2

I would do it differently.

$("input#checkbox").change(function(){
  $("div.checkbox").toggle(this.checked);
});

Considering that your checkbox is the one that it is altering the content of the <div> anyways.

answered Jan 15, 2013 at 17:43

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

2 Comments

Selvakumar Arumugam Over a year ago

I think he want to show the div.checkbox with text content 1 and hide div.checkbox with text content 0

Alexander Over a year ago

I agree with your answer in that regard and you were faster than me though

idrumgood · Accepted Answer · 2013-01-15 17:43:58Z

0

Any time a checkbox is changed, look at your divs with class checkbox and if they have 1, show, else hide.

$('input[type="checkbox"]').on('change', function() {
    $('.checkbox').each(function(){
        if($(this).text() === '1'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

answered Jan 15, 2013 at 17:43

idrumgood

4,93421 silver badges29 bronze badges

1 Comment

idrumgood Over a year ago

While mine works, @Vega 's answer is much cleaner and does the same thing as my .each() function.

Jai · Accepted Answer · 2013-01-15 18:00:17Z

0

If i have to do it then i would love to do in this way: http://jsfiddle.net/P2WmG/

var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
   $('#checkbox').hide();
} else {
   $('#checkbox').show();
}

edited Jan 15, 2013 at 18:00

answered Jan 15, 2013 at 17:55

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

matthewtole · Accepted Answer · 2013-01-15 17:44:29Z

-1

You can use the :contains() Selector to select the divs based on their contents.

$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();

answered Jan 15, 2013 at 17:44

matthewtole

3,25724 silver badges19 bronze badges

2 Comments

Alexander Over a year ago

Contains should be used with extreme care to prevent false-positives

matthewtole Over a year ago

Agreed, but Dan specified that the contents are only either "1" or "0" so you'd be hard pressed to get false positives.

Collectives™ on Stack Overflow

Change CSS based on certain DIV content

5 Answers 5

7 Comments

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related