How to make when the user presses the checkbox to appear a counter of how many units he wants?
This solution is a concept that you must adapt to your codes. Run the snippet.
function showQtd(i,x){
if(x.checked){
qtd_form = '<input type="button" value="-" onclick="altQtd(\''+i+'\',\'-1\')" />'
+'<input id="'+i+'_qtd" name="'+i+'_qtd" type="text" value="1" />'
+'<input type="button" value="+" onclick="altQtd(\''+i+'\',\'1\')" />';
c_item = document.getElementById(i);
conteudo = document.createElement("div");
conteudo.className = 'qtd';
conteudo.id = i+'_qtddiv';
conteudo.innerHTML = qtd_form;
c_item.appendChild(conteudo);
}else{
document.getElementById(i+"_qtddiv").outerHTML = '';
}
}
function altQtd(i,n){
cur_item_num = document.getElementById(i+"_qtd");
new_val = parseFloat(cur_item_num.value)+parseFloat(n);
if(new_val > 0){
cur_item_num.value = new_val;
}
}
.item{
display: block;
float: left;
width: 96%;
padding: 15px 2%;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}
.check{
float: right;
}
.qtd{
display: inline-block;
}
.qtd input[type=text]{
width: 30px; margin: 0 2px;
}
<div class="item" id="frango">
FRANGO
<input type="checkbox" class="check" onchange="showQtd('frango', this)" />
</div>
<div class="item" id="mussarela">
MUSSARELA
<input type="checkbox" class="check" onchange="showQtd('mussarela', this)" />
</div>
<div class="item" id="calabresa">
CALABRESA
<input type="checkbox" class="check" onchange="showQtd('calabresa', this)" />
</div>