CODEWITHSUNDEEP
javascriptjquerycodeigniter
DanielAttard
DanielAttard

Reputation: 3615

Multiple clicks required to complete two functions

I have some javascript that for some reason requires two consecutive clicks in order to function correctly. Here is the code for the link:

<a href="" onclick="select_all_com(); return false">Select All</a>

Now, here is the code for the function that is called with the onclick:

function select_all_com(){
$("[name=file_com_appeal].com-checkbox").each( function() {   
    $(this).attr('checked', true);
}); 
UpdateTotalFee();
}

and finally, here is the last bit of code:

function UpdateTotalFee(){
    var AppealCount = 0;

    $('input[name=file_com_appeal].com-checkbox').each(function(){
    if( $(this).next().hasClass('checked') ){ 
        AppealCount++; } 
    });

    $('#AppealFeeTotal').text("$"+(AppealCount*140));
}

This final part is supposed to run the first time the link is clicked but some reason it does not run the first time, only the second time. Specifically what I mean is that the first click updates all of the checkboxes from off to on, but does not update the #AppealFeeTotal. A subsequent click of the Select All link when the checkboxes are already selected then causes the #AppealFeeTotal to update.

Any ideas why this might be requiring two clicks? I should also add that there is one line of code in particular that I am unsure about. I inherited the code from someone else, and I'm not sure of the reason why this is used:

if( $(this).next().hasClass('checked') ){

Thanks for any ideas you might have.

Upvotes: 2

Views: 160

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10040

$(document).ready( function() { // this is a function which execute when document is ready in jQuery
var clicks = 0; // I am taking clicks variable so, to check whether the user have clicked for the first time

$("a").on("click", function() { // this is a function which execute when target anchor tag is clicked
    clicks++; // now user have clicked the anchor tag so, i have to increase value to 1
    if(clicks==1) { // this condition checks whether user have clicked the anchor tag for the first time? if yes, then execute the code
        $("[name=file_com_appeal].com-checkbox").each( function() { // this is a each function which loops through all targets perform operations
        $(this).attr('checked', true); // while looping through all targets this will set attribute or property "checked" to true means its checked
        });
    }
    else if(clicks==2) { // this conditions check that whether anchor tag is clicked for second time
        var AppealCount = 0;
        $('input[name=file_com_appeal].com-checkbox').each(function(){
            if( $(this).prop('checked') ){ 
                AppealCount++; 
            } 
        });
        $('#AppealFeeTotal').text("$"+(AppealCount*140));
        clicks = 0; // set to zero because if user repeatedly clicks the anchor tag
    }
});
});

Upvotes: 1

Code Magician
Code Magician

Reputation: 24022

A few things, first attr('checked') is not the same as hasClass('checked') I suspect this is where your problem is. Your code does not add a "checked" class that I can see, but you're counting where that is the case. You should be using is:checked selector for this.

Second, if I read your code correctly, you're just counting checked checkboxes to get your total. You can do this more efficiently like this:

$(":checkbox").filter(':checked').length

Naturally you'll want to refine that selector (so it only counts specific checkboxes) but without more html, I can't help with that.

Upvotes: 2

Related Questions