Other Type of checkbox

Question

How could I make a checkbox that every click on it , is the same as a value entered , so I do not need to put in the input next to my checkbox the desired number . In case I haven’t been clear comment , below to help me instead of declassify my question.

<tr>
		<td width="280"><input type="checkbox" name="pedido_refeicao[]" value="Costela de Tambaqui sem Espinha">Costela de Tambaqui sem Espinha</td>
		<td width="70"><input type="text" name="num_refeicao[]" size="7"></td>
		<td width="150"><input type="checkbox" name="pedido_bebida[]" value="Fanta Laranja 1l">Fanta Laranja 1l</td>
		<td width="70"><input type="text" name="num_bebida[]" size="7"></td>
	</tr>

Answer 1

Assuming I have understood right, which is to change the value just by clicking, you can do something very practical with Javascript:

function spin(element,delta,max) {
	var input = element.parentNode.children[1];
	var val = parseInt( '0' + input.value) + delta;
	if(val<0) val = 0;
	if(val>max) val = max;
	input.value = val;
}

<div>
  <button onclick="spin(this,-1,7)">-</button>
  <input name="bacalhau" value="0">
  <button onclick="spin(this,1,7)">+</button>
  Pudim de bacalhau
</div>

<div>
  <button onclick="spin(this,-1,10)">-</button>
  <input name="sopa" value="0">
  <button onclick="spin(this,1,10)">+</button>
  Sopa de graviola
</div>

<div>
  <button onclick="spin(this,-1,4)">-</button>
  <input name="costela" value="0">
  <button onclick="spin(this,1,4)">+</button>
  Costelinha de polvo
</div>

Thus, one can either type, or simply click on - and + to change the value.

The created function has 3 parameters, the first is the this so that the function "know" which was the item clicked, the second is how much to add to each click (or decrease, if negative) and the third is the maximum possible of that field, when clicking the button.

If you change the HTML structure of div, just adjust the content in children[1] to reflect the correct input position.

This is an initial draft, but it’s a good starting point. Then you can augment with CSS, and improve the function to better integrate with HTML5 validation, or any necessary customizations.