Automatically set a checkbox replacing div to "checked"

Question

I have a function that creates inner divs for a parent div. It receives 2 parameters: "div_id" and "visitor_entered". The function also puts a checkbox in one of these created divs and replaces it with a div with a background image. When I click on the div - it changes the background image. Here's how I do it:

$("#checkbox_"+div_id).each(function(){
        $(this).hide().after("<div class='class_checkbox' id='visitor_entered_"+div_id+"' />");
    });

$("#visitor_entered_"+div_id).on('click',function(){
        $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
    });

What I want now, is when this function runs, to check if the "visitor_entered" equal to 1, and if so - set that "#checkbox_"+div_id div to "checked". I tried it like that:

if(visitor_entered==1)
    {
        alert("1, true!");
        $("#visitor_entered_"+div_id).prop('checked',$(this).is('.checked'));
    }

It did the alert when was needed, but didn't set the div to checked. So how can I do that?

**EDIT**

The entire function:

function create_inner_divs(div_id, visitor_entered){
    for(var i=0; i<6; i++){
        divs_array[i] = div_id*10+i;
        var div_width = 704/6;
        $("<div id='"+divs_array[i]+"' style='width:"+div_width+
            "px; float:right; word-wrap:normal; word-break:break-all; padding:0 2px 0 2px;'>&nbsp;</div>").appendTo("#div_visitor_"+div_id);
    }

    $("<div id='div_visitor_entered_"+div_id+"' class='div_visitor_entered'><input name='checkbox_visitor_entered' type='checkbox' id='checkbox_"+div_id+"' class='input_class_checkbox'></div>").
        appendTo("#div_visitor_"+div_id);
    $("<div id='div_print_voucher_icon' class='div_print_voucher_icon'></div>").
        appendTo("#div_visitor_"+div_id);
    $("<div id='delete_visitor' class='delete_visitor'></div>").
        appendTo("#div_visitor_"+div_id);

    $("#checkbox_"+div_id).each(function(){
        $(this).hide().after("<div class='class_checkbox' id='visitor_entered_"+div_id+"' />");
    });

    $("#visitor_entered_"+div_id).on('click',function(){
        $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
    });

    if(visitor_entered==1)
    {
        alert("1, true!");
        $("#visitor_entered_"+div_id).prop('checked',$(this).is('.checked'));
    }

}

Can you give us the whole function, as written? The way you have posted it, I'm not 100% certain I understand what happens and in what order. — Jason M. Batchelor, Jun 20 '13 at 15:56
Also, do you have to update the hidden checkbox form control at the same time, or do you have another function that deals with that? — Jason M. Batchelor, Jun 20 '13 at 15:57
Updated the original question with the entire function. Yes, I also want to toggle the hidden checkbox when the div is clicked. And, of course, set it to `checked` if visitor_entered==1. — Igal, Jun 20 '13 at 16:07
Does the console throw any errors? I would set a breakpoint in the code at the line after your alert(), and check to see what is returned if you try to look at `$("#visitor_entered_"+div_id)` just to make sure it's accessing the object you think it is. — Jason M. Batchelor, Jun 20 '13 at 16:34

Lian · Answer 1 · 2013-06-20T18:17:30.270

1

I think you are using the wrong pseudo selector for "checked". Try $(this).is(':checked') instead of .checked. The dot is for classes.

If you're looking for a class, do $(this).hasClass('.checked')

update with demo code:

You will want to toggle the checkboxes like this:

// your click handler for the div
$("#visitor_entered_"+div_id).on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));

    // get the checkbox id
    var checkbox_id = this.id.replace("visitor_entered_", "checkbox_");
    var checkbox = $('#' + checkbox_id);

    // toggle the checkbox
    if (checkbox.is(':checked')) {
        // uncheck it
        checkbox.removeAttr('checked');
    } else { 
        // check it
        checkbox.attr('checked', 'checked');
    }
});

edited Jun 20 '13 at 18:17

answered Jun 20 '13 at 15:51

Lian

2,197
2
15
16

No, the OP is toggling a class, not the underlying checkbox input element, if I understand correctly... – Jason M. Batchelor Jun 20 '13 at 15:52
the OP said a checkbox is added. So I assumed it's an actual checkbox. – Lian Jun 20 '13 at 16:04
Yes, correct, it's toggling a class. I'd like to toggle the checkbox as well, simultaneously. – Igal Jun 20 '13 at 16:13
Lian's code isn't going to toggle the checkbox, however. You'd need to do something like `$(this).nearest('[type=checkbox]').attr('checked','checked')` (or clear the checked if you're toggling the other direction of course) to modify the underlying checkbox. – Jason M. Batchelor Jun 20 '13 at 16:37
I've edited my code to show you how to toggle the checkbox. I didn't know you could use .is() for checking classes, but .hasClass() is faster. As pointed out here: http://stackoverflow.com/questions/4901553/jquery-hasclass-vs-is – Lian Jun 20 '13 at 18:17

Jason M. Batchelor · Accepted Answer · 2013-06-20T17:07:36.003

AH HA! I think I have it!

    if (visitor_entered == 1) {
        alert("1, true!");
        // in here, you're trying to set a "checked" property ... on a DIV
        // because of that, you are not getting anything, because no such
        // property belongs to the div entity.
        // the only reason the code in your click event handler appears to work
        // is that you are also toggling the class on the div at the 
        // same time that you are attempting to change the property
        $("#visitor_entered_" + div_id).prop('checked', $(this).is('.checked'));
    }

You need manage both elements' states... do something like this, instead:

    if (visitor_entered == 1) {
        alert("1, true!");
        var veDiv = $("#visitor_entered_" + div_id);
        // first, toggle the class on the related checkbox:
        veDiv.toggleClass('checked');
        // second, find the sibling checkbox
        var veChk = veDiv.prev('[type=checkbox]');
        // NOW set that checkbox's checked property... which
        // DOES NOT accept a boolean value... it must be either
        // blank (not-checked) or 'checked'
        veChk.prop('checked', (veChk.is(':checked'))? '':'checked');
    }

(Sorry... copy and paste from your code would not fix the issue)

This is one of the downsides to doing too much chaining... it's easy to assume that you're hitting the right objects at each part of the chain. When you start having issues, break it up so that you can individually test each assumption along the path. I probably would have handled your on-click like so:

    $("#visitor_entered_" + div_id).on('click', function () {
        // you already have a reference to the clicked div, so get its
        // immediate predecessor checkbox
        var myChk = $(this).prev('[type=checkbox]');
        // toggle the div's class
        $(this).toggleClass('checked');
        // and then toggle the checkbox's checked property
        myChk.prop('checked', (veChk.is(':checked'))? '':'checked');
    });

(had to apply the same fix to your onclick code as to the code above...)

Good luck!

Automatically set a checkbox replacing div to "checked"

2 Answers2