jquery selector checkboxes

Question

My page is moderately complicated and I'm fairly sure its the jquery acting weird. So i'll add the relevant content first and if anyone needs more info let me know and I'll provide it.

The premise is that there is a div which holds keyword bubbles. These bubbles have a tooltip (qTip plugin) with relevant info that you can select and deselect. Sometimes keywords have overlapping relevant info so when one is deselected all others need to be deselected at the same time. This list of bubbles is built dynamically via ajax and can continue to be added on to the page live.

The problem is that some of the check boxes don't uncheck when I click on them, but if I click on the same one in another tooltip it works... which also now lets the original one work just fine. I have no idea why some work and others dont. I figure it has to do with the way the live onlick function binding and/or selectors are written.

The following function writes the html content of the tooltip based on a json object, so just assume the content is there. The jquery code at the bottom is the function I have bound to the checkboxes.

function constructSpecializationsHTML(data){
    var html = '';
    for(i = 0; i < data.specializations.length; i++){
        if(data.specializations[i].name != ''){
            html += "<span class='is-specialization-line'>";
            html +=     "<input class='is-specialization-checkbox' type='checkbox' name='" + data.specializations[i].name + "' checked='" + isSpecializationChecked(data.specializations[i].name) + "'/>";
            html +=     "<span>" + data.specializations[i].name + "</span>";
            html += "</span><br />"; 
        } else {
            html += "This keyword is not known in our ontology";
        }
    }
    return html;
}

$(document).on("click", ".is-specialization-checkbox", function(){ 
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']")
    $checkboxs.prop("checked", !$checkboxs.prop("checked"));
});

Why don't you just use radio buttons, which do that natively? — Pointy
– Pointy, Commented May 30, 2012 at 21:45
you can select multiple, so this list isn't mutually exclusive — Tony
– Tony, Commented May 30, 2012 at 21:48

Andrew · Accepted Answer · 2012-05-30 23:01:59Z

1

Firstly, when the click event fires the "checked" property has already been changed, meaning that the states of your checkboxes are different.

Changing

!$checkboxs.prop("checked")

To

$(this).prop("checked")

Solves that.

Secondly when you have only displayed one tooltip your select is only returning one checkbox. If you display all the tooltips before checking or unchecking it returns the correct number. My guess is that qTip isn't adding the html for the tooltip to the DOM until it is displayed. That's why not all your similarly named checkboxes are unchecking though (At least I think that's it!)

edited May 30, 2012 at 23:01

answered May 30, 2012 at 22:33

Andrew

7085 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tony Over a year ago

Excellent, the first part worked perfectly. I like the simpleness of the logic. The second part ended up being the correct issue as well. After I realized that I just added $('.is-keyword-container a').qtip('render'); to render the qtip immediately after they are created and it all works now. Thanks!

ahren · Accepted Answer · 2012-05-30 22:33:15Z

1

$(document).on("click", ".is-specialization-checkbox", function(){
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']")
    $checkboxs.not($(this)).prop("checked", false);
});

changed this to $(this) - that way it is the specific checkbox that was clicked that is getting excluded from the deselection.

edited May 30, 2012 at 22:33

answered May 30, 2012 at 21:43

ahren

17k5 gold badges52 silver badges70 bronze badges

2 Comments

Tony Over a year ago

While this does eliminate the inability to uncheck some checkboxes, it is now not unchecking the other similar item in the other toolitps.

ahren Over a year ago

Do you have a jsFiddle for this?

Collectives™ on Stack Overflow

jquery selector checkboxes

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related