Buttons with Same Class Having Trouble with JQuery Click Function

Question

ALL THESE CODE ARE INSIDE THE $(document).ready(function() {.

JSP of the "Select All" and the checkboxes under it:

<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>

I have 6 divs (each having a class ".related-settings-tab). Each div is containing an "a" element (please read the other details below regarding this "a" element) and multiple checkboxes. What the .done() function do is to show/slide down display the Select All button and checkboxes inside this div. Below is the code on how do I call the selectAllFields() function:

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

I have a 6 elements "a" and it's function is to "Select All" and "Deselect All" the checkboxes under it. Below is the code for selecting all the checkboxes:

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

If I click the first "Select All" button, the $(".request-columns").click(function(){.. is triggered. Meaning the first "Select All" button has now a class "checked-all" (created by the toggleClass code).

Then I click the second "Select All" button. Again, it has now a class "checked-all". Both the first and second "Select All" button (which is now changed to "Deselect All" text) have a class "checked-all".

I repeat, I have 6 buttons using the same class ".request-columns". But in this example, I'm only using the first 2 buttons.

When I tried to "Deselect All" the second, it can deselect. It enters the else code written above.

When I tried to "Deselect All" the first one, it enters the else code. BUT, after that, it enters again the if code.

Thus I can't deselect the previously toggled button. It remains having "checked-all" class because of this.

I have an idea what it is but if you would post your HTML I could be sure. — elzi
– elzi, Commented Oct 6, 2016 at 3:51
Don't just describe your html, edit your question to show a (minimal) sample of it. — nnnnnn
– nnnnnn, Commented Oct 6, 2016 at 3:52
how many times related-settings-tab is called, looks like you might be having duplicate event handlers registered — Arun P Johny
– Arun P Johny, Commented Oct 6, 2016 at 3:55
$(".request-columns").off('click.check-all').on('click.check-all', function(){ — Arun P Johny
– Arun P Johny, Commented Oct 6, 2016 at 3:56
I've edited the question. I've added the JSP for the Select All button and the checkboxes under it. There are 6 related-settings-tab. Each can have the (JSP code I've added above). — Dessa
– Dessa, Commented Oct 6, 2016 at 4:02

madalinivascu · Accepted Answer · 2016-10-06 04:09:48Z

1

Remove the function from the done function of the ajax call and delegate your click event, in the else statement you need to check if element is checked not if its disabled

$('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);
                }
            });
        } 
    });

answered Oct 6, 2016 at 4:09

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

2 Comments

Wesley Smith Over a year ago

Also, it wouldn't be a bad idea to cache this with var $this = $(this); since we use it so much here

madalinivascu Over a year ago

@DelightedD0D was thinking about that :)

Wesley Smith · Accepted Answer · 2016-10-06 05:02:56Z

0

Its not quite clear how your final html looks (you should really post the generated html with your questions). That said, this should work for you and eliminates the repetitive code:

$('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 ;)
  });
});

answered Oct 6, 2016 at 5:02

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Collectives™ on Stack Overflow

Buttons with Same Class Having Trouble with JQuery Click Function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related