This topic is locked

How to implement selected checkboxes counter

9/7/2017 6:00:02 PM
PHPRunner Tips and Tricks
admin

If your users need to see how many records they have selected on the List page here is how you can help them.

  1. Add a placeholder for the counter to HTML code of the List page
    Here is the code that you need to add:

<SPAN id="counter">

</SPAN>


And this screenshot shows where exactly it needs to be inserted (after 'Cancel All' button)


2. Add code to List page: Javascript OnLoad event

$('input[name="selection[]"]').change(function() {



$("#counter").html("Selected: "+$('input[name="selection[]"]:checked').length);

});


3. This is how it looks in generated application

S
safesurf 9/21/2017

Can this code be modified to count checkboxes with select all checkbox at header?

S
smez 11/3/2020

Based on my previous post for highighting rows on checkbox selection:

https://asprunner.com/forums/topic/23051-how-to-change-row-background-color-when-the-check-box-is-checked-and-remove-background-when-unchecked/
..add this code to javascript onload to add/remove highlight and count selected records as they are selected/deselected:

// adds row highlight and counter to list page

// Note: add '<span id="counter"></span>' to a button label or code snippet to display the list page counter

//

//append style for checkedHighlight class

$("<style>")

.prop("type", "text/css")

.html(".checkedHighlight {background-color: yellow !important;}")

.appendTo("head");

// highlight and count selected onload

$('input[name="selection[]"]:checked').closest("tr").find("td").addClass("checkedHighlight");

$("#counter").html($('input[name="selection[]"]:checked').length);

// on change single item

$('input[name="selection[]"]').change(function()

{

if($(this).is(':checked'))

{

$(this).closest("tr").find("td").addClass("checkedHighlight");

}

else

{

$(this).closest("tr").find("td").removeClass("checkedHighlight");

}

$("#counter").html($('input[name="selection[]"]:checked').length);

}

);

// on click chooseAll th

$('#chooseAll_1').closest("th").click(function()

{

if($('#chooseAll_1').is(':checked'))

{

$('input[name="selection[]"]').closest("tr").find("td").addClass("checkedHighlight");

}

else

{

$('input[name="selection[]"]').closest("tr").find("td").removeClass("checkedHighlight");

}

$("#counter").html($('input[name="selection[]"]:checked').length);

}

);



Then use Page Designer to add this html code to a button label or a code snippet to display the current count on the list page:



<span id="counter"></span>
A
alghanim 11/17/2020

Thank you, very cool

A simple addition



<button type="button" class="btn btn-primary">

Rows number <span id="counter" class="badge badge-light"></span>

</button>
K
keithh0427 11/24/2020

Can the selection be limited to just one record? Can I prevent additional checkboxes from being selected?

S
smez 11/25/2020



Can the selection be limited to just one record? Can I prevent additional checkboxes from being selected?


Yes - like this:

// adds row highlight and counter to list page

// Note: add '<span id="counter"></span>' to a button label or code snippet to display the list page counter

//

//append style for checkedHighlight class

$("<style>")

.prop("type", "text/css")

.html(".checkedHighlight {background-color: yellow !important;}")

.appendTo("head");

// highlight and count selected onload

$('input[name="selection[]"]:checked').closest("tr").find("td").addClass("checkedHighlight");

$("#counter").html($('input[name="selection[]"]:checked').length);

// on change single item

$('input[name="selection[]"]').change(function()

{

if($(this).is(':checked'))

{

$(this).closest("tr").find("td").addClass("checkedHighlight");

}

else

{

$(this).closest("tr").find("td").removeClass("checkedHighlight");

}

$("#counter").html($('input[name="selection[]"]:checked').length);

var numSel = $('input[name="selection[]"]:checked').length;

if(numSel==1)

{

$('input[name="selection[]"]:not(:checked)').hide();

}

else

{

$('input[name="selection[]"]:not(:checked)').show();

}
}

);


..and remove the chooseAll checkbox using page designer

K
keithh0427 11/28/2020

Thank you