具有相同类的按钮与 JQuery 单击功能有问题

Question

所有这些代码都在 $(document).ready(function() {.

中

“全选”的 JSP 及其下的复选框：

<div class="select-all-columns select-all-link"><a href="#">Select All</a></div>                            
<s:iterator value="#customReports.dataAttributes" var="col" status="status">
    <div class="col-option">
        <label>
            <s:if test="%{#col.required == true}">
                <input id="report-attribute-${col.id}" disabled="disabled" checked="checked" class="column-check <s:property value="reportType"/>-column-check" type="checkbox" value="${col.name},${col.label},${col.dataType}"/>
            </s:if>
            <s:else>
                <input id="report-attribute-${col.id}" class="column-check <s:property value="reportType"/>-column-check" type="checkbox" value="${col.name},${col.label},${col.dataType}"/>
            </s:else>
            <div class="column-label">${col.label}</div>
        </label>
    </div>
</s:iterator>

我有 6 个 div（每个都有一个类“.related-settings-tab）。每个 div包含一个“a”元素 （请阅读下面有关此“a”元素的其他详细信息） 和多个复选框。.done() 函数的作用是显示/向下滑动显示 Select此 div 内的所有按钮和复选框。下面是如何调用 selectAllFields() 函数的代码：

$(".related-settings-tab").click(function(){
    ....
    $.ajax({
        ....
    }).done(function(){
        selectAllFields();
    });
});

我有一个6元素“a”，它的功能是“全选”和“取消全选” 下的复选框。下面是选中所有复选框的代码：

function selectAllFields(){
    $(".request-columns").click(function(){
        $(this).toggleClass("checked-all");
        var checkBox = $(this).siblings().find(".column-check");
        if($(this).hasClass("checked-all")){
            $(this).find("a").html("Deselect All");
            $(checkBox).each(function(){
                $(this).prop('checked', true);
            });
        } else {
            $(this).find("a").html("Select All");
            $(checkBox).each(function(){
                var disabled = $(this).attr("disabled");
                if(disabled != "disabled"){
                    $(this).prop('checked', false);
                }
            });
        } 
    }); 
}

如果我单击第一个 “全选” 按钮，则会触发 $(".request-columns").click(function(){..。这意味着第一个“全选”按钮现在有一个“全选”类（由 toggleClass 代码创建）。

然后我点击第二个“全选”按钮。同样，它现在有一个“checked-all”类。 第一个和第二个“全选”按钮（现在更改为“取消全选”文本）有一个“全选”类。

我再说一遍，我有 6 个按钮使用相同的类“.request-columns”。 但在本例中，我只使用了前 2 个按钮。

当我第二次尝试“取消全选”时，它可以取消选择。它进入上面写的else代码。

当我尝试“取消全选”第一个时，它进入 else 代码。 BUT，然后再次进入if代码。

因此我无法取消选择之前切换的按钮。 因此，它仍然具有“检查所有”类。

Answer 1

从 ajax 调用的 done 函数中删除该函数并委托您的点击事件，在 else 语句中您需要检查元素是否被检查而不是如果它被禁用

$('body').on('click',".request-columns",function(){
        $(this).toggleClass("checked-all");
        var checkBox = $(this).siblings().find(".column-check");
        if($(this).hasClass("checked-all")){
            $(this).find("a").html("Deselect All");
            $(checkBox).each(function(){
                $(this).prop('checked', true);
            });
        } else {
            $(this).find("a").html("Select All");
            $(checkBox).each(function(){
                if($(this).is(':checked')){
                    $(this).prop('checked', false);
                }
            });
        } 
    }); 

Answer 2

它不是很清楚你最终的 html 看起来如何（你真的应该用你的问题发布生成的 html）。也就是说，这应该对您有用并消除重复的代码：

$('body').on('click', ".request-columns", function() {
  var $this = $(this);
  $this.toggleClass("checked-all");
  var checkedAll = $this.hasClass('checked-all');
  var text = checkedAll ? "Deselect All" : "Select All"; 
  $this.find("a").html(text);
  $this.parent().find(".column-check").each(function() {
    $(this).prop('checked', checkedAll); // note that this this, is a different this ;)
  });
});