Question

I’ve the following code in jquery:

    $('.checklist_true').click(function(e)
{
    $('.checkid').prop({checked: true});
    e.preventDefault();
})

$('.checklist_false').click(function(e)
{
    $('.checkid').prop({checked: false});
    e.preventDefault();
})

I would like to replace .checklist_false and true classes with one, and would like to read a value to a variable containing boolean true/false. (originally .checklist classes attached to tags.
But if I try this:

var tf = new Boolean($(this).prop('rel')).valueOf();
$('.checkid').prop({checked: tf});

It always evaluates to ture and checks the box. Can somebody explains me why?

Answer 1

Your code always evaluates to the same value because the property gets fetched only once – before the handler is attached. You need to evaluate the property every time the handler gets invoked. The this keyword in the scope of the handler represents the element that the event was triggered on.

The true and false values still have to be stored somewhere in the checklist-classed element:

For example:

<div class="checklist" data-checked="true">Check</div>
<div class="checklist" data-checked="false">Uncheck</div>

And then you can read the values from the tags:

$('.checklist').click(function(e)
{
    // this represents the clicked checklist element
    var checked = $(this).data('checked') === "true" ? true : false;
    $('.checkid').prop('checked', checked);
    e.preventDefault();
});