Question

HTML Code:

<div class="checkbox" style=" float:left "></div>
<input type="checkbox" class="realcheckbox" id="financing"  />

jQuery Code:

$(".checkbox").click(function() { 
    var xchecked = $(this).siblings(".realcheckbox").attr("checked");
    if (xchecked == false) {
        $(this).css("background-image","url('checkboxselected.png')");
        $(this).next(".realcheckbox").attr("checked",true);
    }
    else {
        $(this).css("background-image","url('checkbox.png')");
        $(this).next(".realcheckbox").attr("checked",false);
    }
});

Clicking on the fake checkbox isn’t checking the real one, but if the real one is checked, clicking on the fake one is doing the job, means the real one gets unchecked, what’s wrong with the first one ?

Answer 1

Use is(":checked") to test:

var xchecked = $(this).siblings(".realcheckbox").is(":checked");