Question

I have a simple script i wrote to count how many tick boxes are ticked and show/hide content for them. It works fine in some browsers but even testing 2 macs with FF as well both return different. ie. if no boxes it would return laggard, more than this is should change the div on display.

The odd thing is, some browsers are reversing this, e.g. if all the boxes are ticked it shows laggard instead of innovator.

Any ideas?

<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').change(function() {
//alert($('input:checked').size())
//if laggard
if ($('input:checked').size() < 1) {
$("div#four").show();
$("div#one").hide();
$("div#two").hide();
$("div#three").hide();
$("div#EM").hide();
}
//late majority
else if ($('input:checked').size() < 2) {
$("div#three").show();
$("div#one").hide();
$("div#two").hide();
$("div#four").hide();
$("div#EM").hide();
}
// early majority
else if ($('input:checked').size() < 4) {
$("div#two").hide();
$("div#one").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").show();
}
// early adopter
else if ($('input:checked').size() < 6) {
$("div#two").show();
$("div#one").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").hide();
}
else if ($('input:checked').size() < 7) {
$("div#one").show();
$("div#two").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").hide();
}
   else {
  // do something here
$("div#four").show();
 $("div#one").hide();
 $("div#two").hide();
 $("div#three").hide();
 $("div#EM").hide();

}
});   
   $('#showMore').click(function() {
  $('#answer').show('slow', function() {
  });
});

    });

</script>

Answer 1

The only reason why Laggard would show up when all checkboxes are clicked is that you have 7 or more checkboxes. I created a jsfiddle here.

http://jsfiddle.net/wirey00/a3Tx8/

Also, Here’s a shorter way to write your code

$('input[type=checkbox]').change(function() {
    var len = $('input:checked').length;  
    $('#four').toggle(len<1 || len > 6);
    $('#three').toggle(len==1);
    $('#two').toggle(len==4 || len==5);
    $('#one').toggle(len==6);
    $('#EM').toggle(len==2 || len==3);
});​

Using .toggle() allows for you to pass in a condition(true/false) which determines if it is shown(true) or hidden(false)