jQuery复选框样式问题

Question

I have a piece of jQuery code, which I use to check if a checkbox is not checked. If not, it throws an event. Here it is:

$('#Button').click(function() {
        if(!$('input[@name=\"image_id\"]:checked').val()){
            //Do Something
            return false;
            }
});

It works great, but i decided to style the default checkbox with jQuery Checkbox plugin.

Now heres the problem, This is what the output is after styling:

<input type="radio" name="answer_id" value="37" style="position: absolute; z-index: -1; visibility: hidden;">`
<span class="jquery-safari-checkbox jquery-safari-checkbox-checked"><span class="mark"><img src="empty.png"></span></span>

thus leaving me with no way to see if the input is checked. Any ideas on what I can do (if anything) or shall i just revert to the old checkboxes?

Answer 1

Kinda messy in my opinion to do this this way, but:

if($(".jquery-safari-checkbox").hasClass("jquery-safari-checkbox-checked")){
   //Do something
   return false;
}

Answer 2

You don't have to do anything special. The original checkbox is still there and maintains its state. When you click the fancy checkbox, the plugin updates the hidden checkbox to match the current state.

You can update your code a little, too, if you use the latest jQuery. Your code is quite antiquated:

$('#Button').click(function () {
    if (!$('input[name=image_id]').prop('checked')) {
        //Do something
        return false;
    }
});

Demo: http://jsfiddle.net/k2d6E/