1

So I have styled checkboxes with CSS and a sprite using this markup:

<div class="open-checkbox">
   <label class="open-checkbox">
      <input id="<?php echo $id; ?>" class="key-areas-checkbox" name="interests[]" type="checkbox" value="<?php echo $label; ?>" />
   </label>
</div>

and this JS:

$(".key-areas-checkbox:checked").each(function(){
    $(this).next().addClass('checked');
});

$('.open-checkbox').click(function () {
    console.log('click');
    var $this = $(this);
    var $input = $this.find('input');

    $this.toggleClass('checked', $input.is(':checked'));
    return;

    if($input.prop('checked')){
        $this.removeClass('checked');
    } else {
        $this.addClass('checked');
    }
});

And this works in all browsers except IE8 and IE7. Does anyone know how to make this work in those browsers? FYI - the inputs are hidden. I noticed that if I made visibility:visible, checked the checkbox, then hid it again, it displays properly.

Barmar
  • 741,623
  • 53
  • 500
  • 612
codeChris
  • 885
  • 3
  • 17
  • 31
  • 3
    There's no console in IE7 and IE8, if you take it out, does it effect the code? – Victor Sep 17 '13 at 21:47
  • 1
    Please define "doesn't work". Do you see any errors? Check your browser console. BTW, that's doomed to fail on IE if you don't have the dev tools open, due to the console.log line. – bfavaretto Sep 17 '13 at 21:48
  • 3
    after the `return;` your code is not reachable for it exits the function. And what should this line do: `$this.toggleClass('checked', $input.is(':checked'));` ? Toggle class "checked" with "(boolean)" ? – Roko C. Buljan Sep 17 '13 at 21:49
  • I don't see any errors, and when I say 'doesn't work' - I mean it doesn't show the 'checked' class when the inputs are styled as visibility:hidden – codeChris Sep 17 '13 at 21:51
  • @Christo did you try without the console.log as Victor suggested? – geedubb Sep 17 '13 at 21:53

1 Answers1

1

First of all this is a really bad idea:

<div class="      open-checkbox  ">
   <label class=" open-checkbox  ">

than:

$(".key-areas-checkbox:checked").each(function(){
    $(this).next().addClass('checked'); // next? you have no next element!
});

Also:

return; // Exit function and...

// ...forget about this code.
if($input.prop('checked')){
    $this.removeClass('checked');
} else {
    $this.addClass('checked');
}

I would do:

$('.open-checkbox-label').click(function( e ) {

    e.preventDefault(); 
    var $lab = $(this);   
    $lab.toggleClass('checked');
    // not sure what are you trying to do here with inputs...

});

No need to say: Note the new class for your LABEL element. Additionally you need to be careful with browser support of console.log, there are plenty of answers on SO regardin how to fix that.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313