update div with checkbox value checked

Question

update div with checkbox value checked

Navigation

#1 by (2 votes)
#2 by (1 votes)

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 an issue, I'm trying to use the same code on the same page making the changes to products. does anyone know why it is giving conflict even if I try to make the changes?

javascript html checkbox

asked by anonymous 01.12.2018 / 05:34

2 answers

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><inputid="id_checbox1" type=checkbox class='prod' name="Produto1" value="1">

<div id="MPS"><div>

01.12.2018 / 06:05

What is the difference between string.split (',') and string.rsplit (',') in python? How to change data types in fields in a table in mysql at once

score 2 · Accepted Answer

Apparently you are re-declaring the constant res

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

After changing it do not forget to change res on these lines too

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

Making changes should be +/- 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">