update div with checkbox value marked

Asked

Viewed 123 times

0

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const nomes = res.querySelector('[name="nomes"]');

inputs.forEach(x => x.addEventListener("change", () => {	
  total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomes.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
}));

const inputsp = [...document.querySelectorAll("input[class='prod']")];
const res = document.getElementById("resultadop");
const totalp = res.querySelector('[name="totalp"]');
const nomesp = res.querySelector('[name="nomesp"]');

inputsp.forEach(x => x.addEventListener("change", () => {	
  totalp.value = inputsp.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomesp.value = inputsp.filter(el => el.checked).map(el => el.name).join(',');
}));
<div id="resultado">
  <input type="text" name="total" value="">
  <input type="hidden" name="nomes" value="">
</div>
<input type=checkbox class='serv' name="serviço 1" value="1">
<input type=checkbox class='serv' name="serviço 2" value="2">
<input type=checkbox class='serv' name="serviço 3" value="3">

<div id="resultadop">
  <input type="text" name="totalp" value="">
  <input type="hidden" name="nomesp" value="">
</div>
<input type=checkbox class='prod' name="Produto 1" value="1">
<input type=checkbox class='prod' name="Produto 2" value="2">
<input type=checkbox class='prod' name="Produto 3" value="3">

I came across a question, I’m trying to use the same code on the same page making changes to products. someone can tell why is giving conflict even tried to made the changes ?

javascript html checkbox

  • you already have a specific div for this ?

2 answers

2


Apparently you’re re-declaring the constant res

const res = document.getElementById("resultadop");

after changing, don’t forget to change res on those lines also

const totalp = res.querySelector('[name="totalp"]');
const nomesp = res.querySelector('[name="nomesp"]');

Making the changes should look +/- like this:

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const nomes = res.querySelector('[name="nomes"]');

inputs.forEach(x => x.addEventListener("change", () => {	
  total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomes.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
}));

const inputsp = [...document.querySelectorAll("input[class='prod']")];
const resp = document.getElementById("resultadop");   // alterado res => resp
const totalp = resp.querySelector('[name="totalp"]'); // alterado res => resp
const nomesp = resp.querySelector('[name="nomesp"]'); // alterado res => resp

inputsp.forEach(x => x.addEventListener("change", () => {	
  totalp.value = inputsp.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomesp.value = inputsp.filter(el => el.checked).map(el => el.name).join(',');
}));
<div id="resultado">
  <input type="text" name="total" value="">
  <input type="hidden" name="nomes" value="">
</div>
<input type=checkbox class='serv' name="serviço 1" value="1">
<input type=checkbox class='serv' name="serviço 2" value="2">
<input type=checkbox class='serv' name="serviço 3" value="3">

<div id="resultadop">
  <input type="text" name="totalp" value="">
  <input type="hidden" name="nomesp" value="">
</div>
<input type=checkbox class='prod' name="Produto 1" value="1">
<input type=checkbox class='prod' name="Produto 2" value="2">
<input type=checkbox class='prod' name="Produto 3" value="3">

  • 1

    Wow, it worked perfectly

  • Can you ask me a question? would you be able to add the two inputs that receive the totals? if yes the problem I see is that my form (used to save this data in the bd) is among the Services and Products Ivs.

  • @Ronaldodelima To add the input.total and input.totalp first you have to transform the value to a numeric type like int or float. As in this example var soma = parseInt( totalp.value ) + parseInt( total.value ). Now the reported form problem I didn’t understand, maybe you’d better create a new question explaining it.

  • I was able to solve both, Thanks @icaroMartins, but I need a little more help, I need to get more data for each product but the "value" of the input is already being used, In addition to the "name" and "value" accurate the value of commissions. I thought about adding another input type=Hidden with "value='commission'" but how to link each one to its respective product when checkbox vor checked?

1

$(document).ready(function(){
$('#id_checbox1').on('change', function() {
var ckb=this.checked;
if (ckb ==true){
$('#MPS').prepend(this.value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_checbox1" type=checkbox class='prod' name="Produto1" value="1">

<div id="MPS"><div>

Browser other questions tagged javascript html checkbox

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