Valor de checkbox a input

tampon · #1 (**permalink**) 26/08/2009, 16:06

Hola buenas tardes, tengo una pregunta bien tonta, es que tal vez me estgoy equivocando en la sintaxis, resulta que quiero pasar el valor de un grupo de checkbox (solo los check seleccionados) a un solo campo de texto ya sea input o textarea.

tengo este codigo:

Código js:

Ver originalfunction concepto(valor) {
  var d = document.all;
    d.registroConcepto.value += valor + ", "
}

y me da bien el valor, pero si decido deseleccionar el checkbox, no solo no me quita el valor que agrego en el input, sino que encima de eso le vuelve a agregar el valor.

intente meterle un if pero mi sintaxis me fallo, alguien me puede ayudar con ello?? espero haberme explicado bien, gracias.

zerokilled · #2 (**permalink**) 26/08/2009, 16:42

el problema es que estas agregando valores ya existentes aunque la opcion no este marcada. lo adecuado seria recorrer por todos los checkbox para determinar cuales estan marcados y apartir de ahi crear el string. cierto que implica un poco de trabajo adicional dado que cada vez se marca/desmarca una opcion tiene que recorrer todos los checkbox pero es la alternativa mas fiable.

la mejor alternativa que se me ocurre es tener todos los checkbox dentro de un elemento y asignarle un ID, de modo que si necesitias aplicar algun diseño especifico no te veas limitado en la forma de obtener el grupo de checkbox.

Código:

<div id="checkboxes">
<input type="checkbox" onclick="concepto();" ... />
<input type="checkbox" onclick="concepto();" ... />
<input type="checkbox" onclick="concepto();" ... />
...
</div>

para obtener el grupo de checkbox obtienes referencia del <DIV> y luego usas la funcion getElementsByTagName. la funcion devuelve una coleccion que puedes recorrerla con un bucle

Código:

function concepto(){
var string = "", boxes = document.getElementById("checkboxes").getElementsByTagName("input");
for(var i = 0; i < boxes.length; i++)if(boxes[i].checked)string += boxes[i].value + ", ";
input.value = string; // siendo input la referencia al campo de texto;
}

tampon · #3 (**permalink**) 26/08/2009, 17:20

Hola zerokilled gracias por tu comentario, lo realice pero no me funciono mira este es mi codigo completo:

Código html:

Ver original<html>
<head>
<script language="JavaScript">
function concepto(valor) {
  var d = document.all;
    d.registroConcepto.value += valor + ", "
}
</script>
</head>
<body>
<p>Valor 1 <input type="checkbox" value="valor 1" onClick="concepto(this.value)" /></p>
<p>Valor 2 <input type="checkbox" value="valor 2" onClick="concepto(this.value)" /></p>
<textarea readonly="true" id="registroConcepto"></textarea>
</body>
</html>

zerokilled · #4 (**permalink**) 26/08/2009, 17:30

tu codigo no refleja los cambios que te he mencionado. lo tienes casi todo, es simple cuestion de adaptar y agregar.

Código:

<html>
<head>
<script type="text/javascript">
function concepto(){
var string = "", boxes = document.getElementById("checkboxes").getElementsByTagName("input");
for(var i = 0; i < boxes.length; i++)if(boxes[i].checked)string += boxes[i].value + ", ";
document.getElementById("registroConcepto").value = string.replace(/\,\x20$/, ""); // siendo input la referencia al campo de texto;
}
</script>
</head>
<body>
<form>
<div id="checkboxes">
<p>Valor 1 <input type="checkbox" value="valor 1" onClick="concepto()" /></p>
<p>Valor 2 <input type="checkbox" value="valor 2" onClick="concepto()" /></p>
<textarea readonly="readonly" id="registroConcepto"></textarea>
...
</div>
</form>
</body>
</html>

tampon · #5 (**permalink**) 26/08/2009, 17:39

oooh ya ok, me estaba equivocando con el nombre del div y readonly, una disculapa, si esta ok muchas gracias por la ayuda!