Contar el numero de checkbox activos

Montes28 · #1 (**permalink**) 21/04/2012, 14:28

hola amigos del espero me puedan ayudar

estoy enviando un formulario mediante ajax y necesito saber el Contar el numero de checkbox activos.

tengo el siguiente codigo

Código Javascript:

Ver original$.ajax({ 
                  url:'archivo.php',
                  type:'post',
                  data:{ nombre: nombre, 
                   
                  }

Código Javascript:

Ver original<script type="text/javascript">
function calcular(obj, opc){
    if(opc==1)
        obj.checked = (document.getElementById("chk_todos").checked==true)?true:false;
    var val = (obj.checked == true)? obj.id.split("_")[1] : 0;
    obj.value = val;
    //document.getElementById("text_"+ obj.id.split("_")[1]).value = val;
    
}
 
function calcularTodos(){
    for(var i = 0 ; i < document.getElementsByName("chk").length; i++)
        calcular(document.getElementsByName("chk")[i], 1);
        
        
        
}
 
</script>
 
[HIGHLIGHT="HTML"]
 
<form>
    <label for="name">Nombre</label>
        <input type="text" name="nombre" id="nombre" class="text ui-widget-content ui-corner-all" />
<table width="747" border="0" id="users" >
  <tr>
    <td width="244"><label>
      <input type="checkbox" name="chk" value="1" id="chk" onclick='calcular(this,0);'/>
      Opcion 1 
    </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="4" id="chk" onclick='calcular(this,0);'/>
      Opcion  2 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="7" id="chk" onclick='calcular(this,0);'/>
      Opcion 3 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="10" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="13" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="16" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="19" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="22" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="chk" value="25" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</label></td>
    </tr>
  <tr>
    <td><input type="checkbox" name="chk" value="28" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</td>
    </tr>
  <tr>
    <td><input type="checkbox" name="chk" value="31" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</td>
    </tr>
  <tr>
    <td><input type="checkbox" name="chk" value="34" id="chk" onclick='calcular(this,0);'/>
      Opcion 3</td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    </tr>
  <tr>
    <td><label>
    <div align="center">
      <input name="checkbox" type='checkbox' id='chk_todos' onclick="calcularTodos();" value="checkbox" />
    </div>
    </label>
      <div align="center">todos</div></td>
    </tr>
</table>
    </fieldset>
</form>

[/HIGHLIGHT]

Montes28 · #2 (**permalink**) 21/04/2012, 16:32

amigos logre contar los checkbox activos pero si todos tienen en mismo nombre, necesito el name diferente de cada checkbox para procesarlos al lado del servidor .

a continuacion expongo mi codigo espero me puedan ayudar

Código Javascript:

Ver original<script type="text/javascript">
function calcular(obj, opc){
    if(opc==1)
        obj.checked = (document.getElementById("chk_todos").checked==true)?true:false;
    var val = (obj.checked == true)? obj.id.split("_")[1] : 0;
    obj.value = val;
    //document.getElementById("text_"+ obj.id.split("_")[1]).value = val;
    
}
 
function calcularTodos(){
    for(var i = 0 ; i < document.getElementsByName("checkbox").length; i++)
        calcular(document.getElementsByName("checkbox")[i], 1);
        
        
        
}
 
</script>
 
<script type="text/javascript">
 function contar() {
  var checkboxes = document.getElementById("form1").checkbox; //Array que contiene los checkbox
 
  var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
 
  for (var x=0; x < checkboxes.length; x++) {
   if (checkboxes[x].checked) {
    cont = cont + 1;
   }
  }
  document.getElementById('contador').value =cont;
  //alert ("El número de checkbox pulsados es " + cont);
 }
</script>

Código HTML:

Ver original<form id="form1" method="post" action="recibio.php" onClick="contar();">
 <label for="name">Nombre</label>
        <input type="text" name="nombre" id="nombre" class="text ui-widget-content ui-corner-all" />
<table width="747" border="0" id="users" >
  <tr>
    <td width="244"><label>
      <input type="checkbox" name="checkbox" value="opcion1" id="chk"/>
      Opcion 1 
    </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion2" id="chk"/>
      Opcion  2 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion3" id="chk"/>
      Opcion 3 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion4" id="chk"/>
      Opcion 4 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion5" id="chk"/>
      Opcion 5 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion6" id="chk"/>
      Opcion 6 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion7" id="chk"/>
      Opcion 7 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion8" id="chk"/>
      Opcion 8 </label></td>
    </tr>
  <tr>
    <td><label>
      <input type="checkbox" name="checkbox" value="opcion9" id="chk"/>
      Opcion 9 </label></td>
    </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="opcion10" id="chk" />
      Opcion 10 </td>
    </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="opcion11" id="chk" />
      Opcion 11 </td>
    </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="opcion12" id="chk"/>
      Opcion 12 </td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    </tr>
  <tr>
    <td><label>
    <div align="center">
      <input name="" type='checkbox' id='chk_todos' onclick="calcularTodos();" value="checkbox" />
    </div>
    </label>
      <div align="center">todos</div></td>
    </tr>
</table>
    </fieldset>
    
    <input name="contador" id="contador" type="text"/>
</form>

necesito que cada checkbox tenga el nombre asi : name="checkbox_1" name="checkbox_2"....... name="checkbox_12" y poderlos contar hasta el momento lo logro si todos se llaman name="checkbo"

como lo puedo hacer?

emprear · #3 (**permalink**) 21/04/2012, 20:42

Varias cosas a mencionar
No podés repetir los id.
Si los checkboxes corresponden a un mismo grupo, y al parecer asi es (digamos el grupo "opciones"), no tenes que darles names diferentes, contruis un array para que php lo procese
Si ya estás utilizando jquery ($.ajax), por que no simplifica´s y hacés todo con jquery.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<body>
<form id="form1" method="post" action="recibio.php" style="width: 50%;" name="form1">
<fieldset><label for="nombre">Nombre</label> <input type="text" name="nombre" id="nombre" class="text ui-widget-content ui-corner-all" />
<table border="0" id="users">
<tr>
<td width="244"><label><input class="chk" type="checkbox" name="opcion[]" value="opcion1" /> Opcion 1</label></td>
 
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion2" /> Opcion 2</label></td>
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion3" /> Opcion 3</label></td>
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion4" /> Opcion 4</label></td>
</tr>
<tr>
 
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion5" /> Opcion 5</label></td>
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion6" /> Opcion 6</label></td>
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion7" /> Opcion 7</label></td>
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion8" /> Opcion 8</label></td>
 
</tr>
<tr>
<td><label><input class="chk" type="checkbox" name="opcion[]" value="opcion9" /> Opcion 9</label></td>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="opcion[]" value="opcion10" /> Opcion 10</td>
</tr>
<tr>
<td><input class="chk" type="checkbox" name="opcion[]" value="opcion11" /> Opcion 11</td>
</tr>
<tr>
 
<td><input class="chk" type="checkbox" name="opcion[]" value="opcion12" /> Opcion 12</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><label><input type='checkbox' id='chk_todos' value="checkbox" /></label> todos</td>
</tr>
</table>
</fieldset>
<input name="contador" id="contador" type="text" value="ninguno" /></form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){  
 $(".chk").click(function(event) {
 var laclase = $(this).attr("class");
 var count = $(":checkbox.chk:checked").length;
 $('#contador').val(count);
 });
 
 $("#chk_todos").click(function(){
 
 var checked_estado = this.checked;
 
 if(checked_estado == true){
  $('#contador').val('todos');
  }else{
  $('#contador').val('ninguno');
  }
  $(".chk").each(function(){
  this.checked = checked_estado;
  });
 }); 
});
//]]>
</script>
 
</body>
</html>

Para finalizar, el valor de la cantidad de opciones seleccionadas y el valor de las mismas, se puede hacer en el php
Saludos

Montes28 · #4 (**permalink**) 21/04/2012, 21:07

gracias por responder emprear

tengo una duda

como se que se el valor de los checkbox si estan activos?

Montes28 · #5 (**permalink**) 21/04/2012, 21:19

este es mi script php

Código PHP:

Ver original$nombre = $_POST["nombre"];
echo $nombre;
echo "<br>";
$contador = $_POST["contador"];
echo $contador;
echo "<br>";
for ($i=1;$i<=$_POST['contador'];$i++)
        {
         
         //echo $i;
         echo "<br>";
         $destinatario = $_POST["opcion[]"];
         echo $destinatario;
         echo "<br>";
        }

tengo problemas para imprimir el array de opciones

emprear · #6 (**permalink**) 22/04/2012, 12:45

Te dejo un modelo comlpleto para que lo analices y compares con el tuyo, la cave un poco pasa por usar empty(). Se entiende que $opciones es un array, donde cada uno de sus valores es lo que se haya pasado en los opcion[] del form

fijate

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Opciones</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<?php
 
if(isset($_POST['procesar'])){
$opciones = $_POST['opcion'];
if(isset($_POST['ayudaExtra'])){
echo "<p>Se solicitó ayuda extra</p>\n";
}else{
echo "<p>No se requirió ayuda extra.</p>\n";
}
 
// Con esto te imprime cuales opciones se seleccionaron 
if(empty($opciones)){
echo "<p>No hay opciones seleccionadas.</p>\n";
}else{
$totalSeleccionados = count($opciones);
echo "<p>Se seleccionaron $totalSeleccionados opcion(s): ";
for($i=0; $i < $totalSeleccionados; $i++){
echo($opciones[$i] . " ");
}
echo "</p>";
}
 
        
// una variante si querés saber si un checkbox en particular está seleccionado
// lo pongo solo para dos, A y B, podés agregarla para el resto, se puede tambie extraer esta info
// del resultado anterior, usa la función estaSeleccionado() al pie
    if(estaSeleccionado('opcion','A')){
    echo "<b>A se incluye en la selección</b><br />";
    }
    if(estaSeleccionado('opcion','B')){
    echo "<b>B se incluye en la selección</b><br />";
    }
 
} // cierre post procesar
    
function estaSeleccionado($nombreCb,$valorCB){
    if(!empty($_POST[$nombreCb])){
        foreach($_POST[$nombreCb] as $elValor){
            if($elValor == $valorCB){
            return true;
            }
        }
    }
return false;
}
?>
 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <p>
        ¿Que opciones prefiere?<br/>
        <input type="checkbox" name="opcion[]" value="A" />A<br />
        <input type="checkbox" name="opcion[]" value="B" />B<br />
        <input type="checkbox" name="opcion[]" value="C" />C<br />
        <input type="checkbox" name="opcion[]" value="D" />D<br />
        <input type="checkbox" name="opcion[]" value="E" />E
    </p>
    <p>
        ¿Necesita ayuda extra?
        <input type="checkbox" name="ayudaExtra" value="Yes" />
    </p>
    <input type="submit" name="procesar" value="enviar" />
</form>
 
 
</body>
</html>

Saludos
PD, si hay más dudas, te recomendo pidas que muevan el tema a php

iramriquelme · #7 (**permalink**) 22/05/2012, 11:31

Cita:

Iniciado por emprear

Varias cosas a mencionar
No podés repetir los id.
Si los checkboxes corresponden a un mismo grupo, y al parecer asi es (digamos el grupo "opciones"), no tenes que darles names diferentes, contruis un array para que php lo procese
Si ya estás utilizando jquery ($.ajax), por que no simplifica´s y hacés todo con jquery.

Para finalizar, el valor de la cantidad de opciones seleccionadas y el valor de las mismas, se puede hacer en el php
Saludos

Me ha servido mucho tu código para hacer un formulario donde al marcar más de una casilla aparezca un menú de opciones. , parecido al que usa GMAIL en su bandeja de entrada y para el cual [URL="http://www.forosdelweb.com/f13/desplegar-menu-hacer-clic-casilla-lista-checkbox-tipo-gmail-994445/#post4193918"] abrí un tema explicando lo que se pretendía lograr[/URL] y el Javascript que soluciona dicho asunto.

Saludos.