CODEWITHSUNDEEP
jquerycheckboxtoggle
Phil
Phil

Reputation: 105

Checkbox not checking when used in jQuery toggle()

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

Upvotes: 0

Views: 1245

Answers (1)

karim79
karim79

Reputation: 342625

Bind to click instead. It should work.

Upvotes: 3

Related Questions