Calculating the values of checkboxes/radios\ in a loop not working [closed]-CodePudding

I am trying to get a calculator to work, which it does if I take it out the "foreach" loop as soon as its in the loop it does not work, can someone please help

Sorry for the poor mark-up, I have now edited the code and copied the rendered version and removed the php.

<script>

           jQuery(document).ready(function($) {
              $("#service_calculate").change(function() {
                var totalPrice = 0,
                  values = [];
                $('input[type=checkbox], input[type=radio]').each(function() 
               {
                  if ($(this).is(':checked')) {
                    values.push($(this).val());
                    totalPrice  = parseInt($(this).val());
                  }
                });
                $("#total span").text(totalPrice);
              });
            });
</script>






    

    <script 
 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
         </script>
        
        <form id="service_calculate">
         <table class="table">
          <thead>
           <tr>
            <th>Additional items</th>
            <th>Description</th>
            <th>Price</th>
            <th style="width: 130px;">Select</th>
           </tr>
          </thead>
    
         <tbody>
            <tr>
             <td>Service 1</td>
             <td>This is service 1</td>
             <td>10</td>
             <td><input class="checkbox" type="checkbox" value="10"  
             name="Service 1">Select </td>
           </tr>
            <tr>
             <td>Service 2</td>
             <td>This is service 2</td>
             <td>10</td>
             <td><input class="checkbox" type="checkbox" value="10"  
              name="Service 2">Select </td>
           </tr>
            <tr>
             <td>Service 3</td>
             <td>This is service 3</td>
             <td>15</td>
             <td><input class="checkbox" type="checkbox" value="15"  
             name="Service 3">Select </td>
           </tr>
        </tbody>
       </table>
         <div id="total">Total Price: <span >0</span></div>
       </form>

  <!-- end snippet -->

Thanks in advance, any help much appreciated.

CodePudding user response：

Firstly, as noted in the comments under your question, you have some HTML issues. The form element cannot be a child of the tbody. Instead, wrap it around the entire table. In addition your td containing the 'service_name' is malformed; it's missing a > to close the opening tag.

From there to do what you require you can create a function which creates an array of the selected values using map(), adds them together using reduce(), and then displays them where necessary.

Also note in this example I added <label> elements to make the hit area for the checkboxes bigger and easier to use.

jQuery($ => {
  const calcTotal = () => $checkboxess.filter(':checked').map((i, el) => parseFloat(el.value)).get().reduce((s, v) => s   v, 0);

  let $checkboxess = $("#service_calculate :checkbox").on('change', e => {
    $("#total span").text(calcTotal().toFixed(2));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="service_calculate">
  <table class="table">
    <thead>
      <tr>
        <th>Additional items</th>
        <th>Description</th>
        <th>Price</th>
        <th style="width: 130px;">Select</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>service_name_1</td>
        <td>service_desc_1</td>
        <td>1.00</td>
        <td>
          <label>
            <input class="checkbox" type="checkbox" value="1.00" name="service_name_1">
            Select
          </label>
        </td>
      </tr>
      <tr>
        <td>service_name_2</td>
        <td>service_desc_2</td>
        <td>2.50</td>
        <td>
          <label>
            <input class="checkbox" type="checkbox" value="2.50" name="service_name_2">
            Select
          </label>
        </td>
      </tr>
      <tr>
        <td>service_name_3</td>
        <td>service_desc_3</td>
        <td>3.99</td>
        <td>
          <label>
            <input class="checkbox" type="checkbox" value="3.99" name="service_name_3">
            Select
          </label>
        </td>
      </tr>
    </tbody>
  </table>
  <div id="total">Total Price: <span>0</span></div>
</form>