Question

我的页面中等复杂，我很确定它的jquery表现得很奇怪。所以我会首先添加相关内容，如果有人需要更多信息，请告诉我，我会提供。

前提是有一个div保存关键字气泡。这些气泡有一个工具提示（qTip插件），其中包含您可以选择和取消选择的相关信息。有时关键字具有重叠的相关信息，因此当取消选择一个关键字时，需要同时取消选择其他关键字。这个气泡列表是通过ajax动态构建的，可以继续添加到页面上。

问题是当我点击它们时某些复选框没有取消选中，但是如果我在另一个工具提示中点击相同的复选框就可以了...现在也让原版工作正常。我不知道为什么有些工作和其他人不这样做。我认为这与写入实时onlick函数绑定和/或选择器的方式有关。

以下函数根据json对象写入工具提示的html内容，所以假设内容在那里。底部的jquery代码是我绑定到复选框的函数。

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"));
});

Answer 1

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

将this更改为$(this) - 这样，它就是被取消选中的特定复选框。

Answer 2

首先，当click事件触发时，“checked”属性已经被更改，这意味着复选框的状态不同。

更改

!$checkboxs.prop("checked")

要

$(this).prop("checked")

解决这个问题。

其次，当您只显示一个工具提示时，您的选择仅返回一个复选框。如果在检查或取消选中之前显示所有工具提示，则返回正确的数字。我的猜测是，在显示之前，qTip不会将工具提示的html添加到DOM。这就是为什么不是所有类似名称的复选框都取消勾选（至少我认为就是这样！）

jquery选择器复选框

2 个答案: