How can I create a computational function based on checkboxes with jQuery?

March 3, 2022

I have several checkboxes in my table (unspecified number) and set a value of 2000 for each checkbox.
I want each check box that was checked to be multiplied by 2000 and if it was unchecked 2000 be deducted from the total amount?

For example, if 3 checkboxes are checked, the number 3 is multiplied by 2000 ,3 * 2000.
And if it is unchecked from this number, its value will be deducted from the total?

And display the total value in span?

<table class="table">
<thead>
    <tr>             
        <th>
           choose
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in listitem)
    {
        <tr>                                                 
           
            <td>
                <input class="check-horse mr-2" type="checkbox" autocomplete="off" />
            </td>

        </tr>
    }
</tbody>

total price :<span class="text-success totalprice"></span>

>Solution :

You can get the checked checkbox simply by using :checked pseudo selector

const multiplier = 2000;
function getTotalPrice(){
    const checkedCount = $('.check-horse:checked').length;
    return checkedCount * multiplier;
}

$(document).on('change','.check-horse', e=> $('.totalprice').text(getTotalPrice());

It should work as you expected.

Please mark the answer as accepted if it helped