Question

I have this jQuery code, which uses the toggle() function on a checkbox input (via ID #rescheck), to reveal a hidden div on click/tick of the checkbox – it all works perfectly, except that the actualy “tick” or “check” does not appear in the box, on Chrome.

In Firefox its the opposite, the check or tick is always present from page load, regardless of whether the hidden div iss visible or not.

$("#rescheck").toggle(function(){   
        $("#reservationfields").stop().animate({ down: "+=300" }, 8000)      
        $("#reservationfields").stop().slideDown("slow");      
   }, function(){
        $("#reservationfields").stop().animate({ down: "-=300" }, 8000)      
        $("#reservationfields").stop().slideUp("slow");
    }); 

After checking another question on this site (answer 14) I then amended my code to:

    $('#rescheck').change(function () {
    if ($(this).attr("checked")) {
        $("#reservationfields").stop().animate({ down: "+=300" }, 8000)      
        $("#reservationfields").stop().slideDown("slow"); 
    } else {
        $("#reservationfields").stop().animate({ down: "-=300" }, 8000)      
        $("#reservationfields").stop().slideUp("slow");
    }
});

This works beautifully in FF and Chrome, but Internet Explorer simply will not ‘check’ and will not reveal the hidden div as a result.

I really need this to work cross-browser, can anyone shed some light? 🙁

Thank you

Answer 1

Bind to click instead. It should work.