Skip to main content

How to show count of selected checkbox

Comments

2 comments

  • Blake

    If checkboxes are in a data table then you can use a process task to loop through the rows.  See this example https://devnet.logianalytics.com/hc/en-us/articles/4406822481687-Running-Datalayer-and-Data-Table-Rows

     

    0
  • VISUI

    The quickest and easiest solution is to use jQuery and a class selector on the input control, but this will not work if your data table is paged.

    <Report ID="LogiForum.TableCheckboxCount">
    <IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" />
    <Body>
    <Label ID="lblCount" Caption="0" HtmlTag="h2" />
    <DataTable ID="dt1" AjaxPaging="True">
    <DataLayer Type="Static">
    <StaticDataRow Product="Apples" Description="Red Delicious" />
    <StaticDataRow Product="Apples" Description="Macintosh" />
    <StaticDataRow Product="Apples" Description="Golden Delicious" />
    </DataLayer>
    <DataTableColumn Header="Action">
    <InputCheckbox CheckedValue="@Data.Product~" ID="inpProduct" Class="classProduct" />
    </DataTableColumn>
    <DataTableColumn ID="colProduct" Header="Product">
    <Label ID="lblProduct" Caption="@Data.Product~" />
    <DataColumnSort DataColumn="Product" />
    </DataTableColumn>
    <DataTableColumn ID="colDescription" Header="Description">
    <Label ID="lblDescription" Caption="@Data.Description~" />
    <DataColumnSort DataColumn="Description" />
    </DataTableColumn>
    </DataTable>
    <IncludeScript IncludedScript="$('.classProduct').click(function() {&#xD;&#xA; var countProduct = $('.classProduct:checked').length&#xD;&#xA; $('#lblCount').text(countProduct);&#xD;&#xA;});" />
    </Body>
    <ideTestParams />
    </Report>

    If you are looking for a solution with a paged data table, you will need to do something similar, however instead of using a jQuery selector to count the number of checked elements, you will need to determine if the click event causes the input to be checked or unchecked and increment the label value accordingly.  

    Likewise you could also use Logi's onclick event directly on the checkbox, however, this will initialize an event handler separately for each checkbox and could cause a performance lag with large data tables.  Similar to the previous solution for a paged data table, the value will need to be stored and incremented within your script depending on if the checkbox is checked or not.

    The later is a bit more complicated, but if you are interested VISUI can assist with this solution.

    0

Please sign in to leave a comment.