Check and uncheck checkbox and read its state

How can I read the state of my checkbox and set it's state to be visible ? I'm try开发者_StackOverflow社区ing something like this, but it always returns true:

 $('.show-check').live('click', function(e) {
    e.preventDefault();

    var checked = ($(this).is(':checked'));
    if(checked == true){
       $(this).attr('checked', true); 
    }
    else{
        $(this).attr('checked', false);
    }
 });


    <li>
        <img src="" class="show-image"/>
        <span class="show-title"></span>
        <input type="checkbox" class="show-check" />
    </li>

It works this way:

 $('.show-check').live('click', function() {


var checked = ($(this).is(':checked'));

if(checked){
   $(this).attr('checked', true);
}
else{
    $(this).attr('checked', false);
}

});

I think you couldn't check the checkbox because the default action is prevented, which is to check/uncheck the box

Here's my thought:

1. the checkbox is initially unchecked;

2. when you click the checkbox, the click event is fired, and the var checked is set to true;

3. since it's set to true, the if(checked) block will always be executed;

4. but you may wonder why the checkbox is not checked on the UI. I think it's because you set e.preventDefault() which tells the checkbox not to be affected by the default behaviour of click event, which is to check it;

5. the next time you check it again, same thing will happen.

Maybe this would be clearer if you used the .change() event instead of the .clecked() event.

You are saying when the check box is clicked, if checked==true than set checked = true, so the false part will never be executed if you start with it checked. The same is true if you start with it set to false.