2. PHPRunner Tips and Tricks
  3. How to implement selected checkboxes counter
This topic is locked

How to implement selected checkboxes counter

 		9/7/2017 18:00:02
PHPRunner Tips and Tricks
Sergey Kornilov 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