How to do this in Javascript? [closed]

0

How to make when the user presses the checkbox to appear a counter of how many units he wants?

    
asked by anonymous 28.09.2017 / 04:01

1 answer

1

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>
    
28.09.2017 / 05:06