Mark Checklist container and run JS

Asked

Viewed 70 times

2

I’m getting a lot of Javascript, I’ve tried several ways but I’m not getting it...

I have a structure like this:

inserir a descrição da imagem aqui

I want that when the first checkbox is checked, it multiplies the first price with the first quantity. And when it is unchecked it zeroes the multiplication. Vice versa to the other checklists.

The quantities of lines are fixed, they will always be these. At the end make the sum of all the values and add up the total.

my PHP code looks like this:

<table id="table1" width="100%" border="1">
		  <tr>
			<th></th>
			<th>Produto</th>
			<th>Preço</th>
			<th>Quantidade</th>
			<th>Subtotal</th>
			<th></th>
		  </tr>
  
		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query2['produto']; ?></td>
			<td class="td_preco"><?php echo $linha_query2['preco']; ?></td>
			<td class="td_qt"><input name="qt2" id="qt2" value="1"/></td>
			<td class="td_sub"><input name="sub2" id="sub2" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch2" value="ch2"></td>
		  </tr>
		  
		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query3['produto']; ?></td>
			<td class="td_preco"><?php echo $linha_query3['preco']; ?></td>
			<td class="td_qt"><input name="qt3" id="qt3" value="1"/></td>
			<td class="td_sub"><input name="sub3" id="sub3" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch3" value="ch3"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query4['produto']; ?></td>
			<td class="td_preco"><?php echo $linha_query4['preco']; ?></td>
			<td class="td_qt"><input name="qt4" id="qt4" value="1"/></td>
			<td class="td_sub"><input name="sub4" id="sub4" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch4" value="ch4"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query5['produto']; ?></td>
			<td class="td_preco"><?php echo $linha_query5['preco']; ?></td>
			<td class="td_qt"><input name="qt5" id="qt5" value="1"/></td>
			<td class="td_sub"><input name="sub5" id="sub5" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch5" value="ch5"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query6['produto']; ?></td>
			<td class="td_preco"><?php echo $linha_query6['preco']; ?></td>
			<td class="td_qt"><input name="qt6" id="qt6" value="1"/></td>
			<td class="td_sub"><input name="sub6" id="sub6" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch6" value="ch6"></td>
		  </tr>		  

		  <tr align="center">
			<td></td>
			<td>
			<span class="carregando">Aguarde, carregando...</span>			
			<select name="id_lub" id="id_lub">
				<option value="">Nenhum</option>
				<?php
					$query = "SELECT * FROM lub ORDER BY lub";
					$result_query = mysqli_query($conn, $query);
					while($row_query = mysqli_fetch_assoc($result_query) ) {
						echo '<option value="'.$row_query['id_estoque'].'">'.$row_query['lub'].'</option>';
					}
				?>
			</select>
			</td>
			<td class="td_preco>
			<span name="valor_unitario" id="valor_unitario"></span>
			</td>
			<td class="td_qt"><input name="qt7" id="qt7" value="1"/></td>
			<td class="td_sub"><input name="sub7" id="sub7" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch7" value="ch7"></td>
		  </tr>			  
		</table>

<input name="total" id="total" readonly/>

Could someone help me?

php javascript jquery ajax
  • 1

    Please do not post PHP in questions about Javascript, this only generates unnecessary work for those who are trying to help. Post the HTML received by the client, not the source code.

  • Okay. I thought it would help to understand the structure of my site view the id’s I’m using and etc., because there might be error in something and so the JS does not perform...

1 answer

2


You can do it this way, creating 2 functions: one that calculates the subtotals and one that calculates the total. Also create an Event Handler to trigger the functions when changing the checkbox and changing the value of the quantities by playing the sum of the subtotals (only of the lines where the checkbox is marked) in the field #total:

$(function(){
   
   function calcSub(linha){
      
      var preco = linha.find(".td_preco").text().trim() || 0;
      var quant = linha.find(".td_qt input").val() || 0;
      
      linha
      .find(".td_sub input")
      .val( linha.find(":checkbox").is(":checked") ? parseFloat(preco) * quant : '');

   }

   function calcTotal(){
      
      var total = 0;
      $("#table1 :checkbox:checked").each(function(){
         
         total += parseFloat($(this)
         .closest("tr")
         .find(".td_sub input")
         .val());
         
      });
      
      $("#total").val(total.toFixed(2));

   }
   
   $("#table1 :checkbox, #table1 .td_qt input").on("click input", function(){
      calcSub($(this).closest("tr"));
      calcTotal();
   });
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" width="100%" border="1">
		  <tr>
			<th></th>
			<th>Produto</th>
			<th>Preço</th>
			<th>Quantidade</th>
			<th>Subtotal</th>
			<th></th>
		  </tr>
  
		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query2['produto']; ?></td>
			<td class="td_preco">5.18</td>
			<td class="td_qt"><input name="qt2" id="qt2" value="1"/></td>
			<td class="td_sub"><input name="sub2" id="sub2" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch2" value="ch2"></td>
		  </tr>
		  
		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query3['produto']; ?></td>
			<td class="td_preco">2.00</td>
			<td class="td_qt"><input name="qt3" id="qt3" value="1"/></td>
			<td class="td_sub"><input name="sub3" id="sub3" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch3" value="ch3"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query4['produto']; ?></td>
			<td class="td_preco">1.20</td>
			<td class="td_qt"><input name="qt4" id="qt4" value="1"/></td>
			<td class="td_sub"><input name="sub4" id="sub4" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch4" value="ch4"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query5['produto']; ?></td>
			<td class="td_preco">1</td>
			<td class="td_qt"><input name="qt5" id="qt5" value="1"/></td>
			<td class="td_sub"><input name="sub5" id="sub5" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch5" value="ch5"></td>
		  </tr>

		  <tr align="center">
      <td></td>
			<td><?php echo $linha_query6['produto']; ?></td>
			<td class="td_preco">3.50</td>
			<td class="td_qt"><input name="qt6" id="qt6" value="1"/></td>
			<td class="td_sub"><input name="sub6" id="sub6" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch6" value="ch6"></td>
		  </tr>		  

		  <tr align="center">
			<td></td>
			<td>
			<span class="carregando">Aguarde, carregando...</span>			
			<select name="id_lub" id="id_lub">
				<option value="">Nenhum</option>
			</select>
			</td>
			<td class="td_preco">
			<span name="valor_unitario" id="valor_unitario"></span>
			</td>
			<td class="td_qt"><input name="qt7" id="qt7" value="1"/></td>
			<td class="td_sub"><input name="sub7" id="sub7" readonly/></td>
			<td class="td_ch"><input type="checkbox" name="ch7" value="ch7"></td>
		  </tr>			  
		</table>

<input name="total" id="total" readonly/>

  • Okay, thank you. This 'Handler' I did not know. I will study about.

  • Could you ask me a question, please, within that code? on the part: $("#table1 :checkbox, #table1 .td_qt input")... is to update the subtotal, correct? I could add: #table1 . td_select select, and it would work?

  • 1

    I think so. It will click on select. You have to test.

Browser other questions tagged php javascript jquery ajax

You are not signed in. Login or sign up in order to post.