Hiding an HTML Check Box in IE/Chrome

[Navlag]

The code below seems to work great in Google Chrome, it hides a question in a div unless the question before it is answered.

However, it doesn't seem to work at all in I.E 8.

Can someone give me a solution on how to make it work in both browswers please?

Thank you in advance

<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" id="cell" data-on="Yes" data-off="No" />

<div class="hide_if_no">
<label for="blackBerry">4. If YES, is the cell phone a BlackBerry? (Y/N)</label>
<input type="checkbox" name="blackBerry" id="blackBerry" data-on="Yes" data-off="No" />
</div>

<style>
input[type=checkbox] ~ div.hide_if_no {display:none}
input[type=checkbox]:checked ~ div.hide_if_no {display:block}
</style>

[Dani]

The general sibling selector (aka ~) is CSS3 and not currently fully supported by IE.

Try doing

div.hide_if_no input[type=checkbox] { display: none }
div.hide_if_no input[type=checkbox]:checked { display: block !important }

[Dani]

Oh, actually, nevermind ... That wouldn't exxactly work ;)

Sorry, the only way I can think of doing it off the top of my head is with jQuery.

[Navlag]

Would you mind showing me an example?

[Dani]

I did some more research and it seems that while the general sibling selector (aka ~) requires CSS3 and currently is not IE compatible, the adjacent sibling selector (aka +) will work with CSS2 and IE7+.

What this means is that, if both input checkboxes are immediate siblings to each other:

input#have_cell + input#have_blackberry { display: none }
input#have_cell:checked + input#have_blackberry { display: block !important }

As mentioned, this only works if the second input is immediately following the first one as its adjacent sibling. The selector operates on the adjacent sibling, so in this case checking the question asking whether you have a cellphone triggers asking the follow up question of whether it is a blackberry.

As far as jQuery is concerned, I would do something like:

$(document).on('click', 'div.hide_if_no input[type=checkbox]:checked', function() {
    $(this).siblings().hide();
});

$(document).on('click', 'div.hide_if_no input[type=checkbox]:not(:checked)', function() {
    $(this).siblings().show();
});    

Of course, there are probably much better and more efficient ways of doing it. This is just the general concept.

[EvolutionFallen]

I got this working when running IE9 in IE8 mode (browser and standards)

$('#cell').click(function() {
    $('.hide_if_no').toggle(this.checked);
});

Here's the JSFiddle: http://jsfiddle.net/PhfJB/1/

P.S. - Dani, in your .on() calls above, shouldn't the second parameters for each call be input#cell:checked and input#cell:not(:checked)? I think we need to check if the #cell checkbox is checked, not if the checkbox inside .hide_if_no is

[Navlag]

Weird, I can get this working on a blank page and I see it working on Jfiddle, but I can't get it to work in my established page...

[EvolutionFallen]

Do you have jQuery included on your page? What happens when you click on the button?