Other Type of checkbox

Question

Other Type of checkbox

Navigation

#1 by (5 votes)

1

How can I make a checkbox that every time I click on it, is the same as a value entered, so I do not need to put the number next to my checkbox in the input box. If I have not been clear, comment below to help me instead of disqualifying 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>

html

asked by anonymous 24.01.2017 / 23:56

1 answer

Problem creating a .sh script to get into a directory What's wrong with my script? - setTimeOut

score 5 · Accepted Answer

Assuming I have understood correctly, 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>

So you can either type in or simply click - and + to change the value.

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

If you change the HTML structure of div , simply set the index to children[1] to reflect the correct position of the input.

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