Marque una casilla de verificación en una celda de la tabla haciendo clic en cualquier lugar de la celda de la tabla

Estoy tratando de encontrar la manera de hacerlo, pero no puedo encontrar la información en ninguna parte. Básicamente, tengo una tabla con cada casilla que contiene una casilla de verificación. Quiero poder marcar la casilla de verificación haciendo clic en cualquier lugar dentro de la celda. No puedo entender cómo hacerlo, javascript sería el mejor tipo de solución para mí, pero también podría usar jQuery.Marque una casilla de verificación en una celda de la tabla haciendo clic en cualquier lugar de la celda de la tabla

Aquí está una fila de mi mesa me gustaría hacer esto en.

<tr> 
    <td><center>9:00 - 10:00</center></td> 
    <td><center><input type="checkbox" name="free" value="mon09"></center></td> 
    <td><center><input type="checkbox" name="free" value="tue09"></center></td> 
    <td><center><input type="checkbox" name="free" value="wed09"></center></td> 
    <td><center><input type="checkbox" name="free" value="thu09"></center></td> 
    <td><center><input type="checkbox" name="free" value="fri09"></center></td> 
</tr>

Fuente

2012-03-16 cs_irl

jQuery es JavaScript. – Pointy

-1

esto debe hacerlo:

<html> 
    <head> 
     <script type="text/javascript"> 
      function onload() { 
       var tds = document.getElementsByTagName("td"); 
       for(var i = 0; i < tds.length; i++) { 
        tds[i].onclick = 
            function(td) { 
             return function() { 
              tdOnclick(td); 
             }; 
            }(tds[i]); 
       } 
       var inputs = document.getElementsByTagName("input"); 
       for(var i = 0; i < inputs.length; i++) { 
        inputs[i].onclick = 
            function(input){ 
             return function() { 
              inputOnclick(input); 
             }; 
            }(inputs[i]); 
       } 
      } 
      function tdOnclick(td) { 
       for(var i = 0; i < td.childNodes.length; i++) { 
        if(td.childNodes[i].nodeType == 1) { 
         if(td.childNodes[i].nodeName == "INPUT") { 
          if(td.childNodes[i].checked) { 
           td.childNodes[i].checked = false; 
           td.style.backgroundColor = "red"; 
          } else { 
           td.childNodes[i].checked = true; 
           td.style.backgroundColor = "green"; 
          } 
         } else { 
          tdOnclick(td.childNodes[i]); 
         } 
        } 
       } 
      } 
      function inputOnclick(input) { 
       input.checked = !input.checked; 
       return false; 
      } 
     </script> 
    </head> 
    <body onload="onload()"> 
     <table> 
      <tr> 
       <td><center>9:00 - 10:00</center></td> 
       <td><center><input type="checkbox" name="free" value="mon09"></center></td> 
       <td><center><input type="checkbox" name="free" value="tue09"></center></td> 
       <td><center><input type="checkbox" name="free" value="wed09"></center></td> 
       <td><center><input type="checkbox" name="free" value="thu09"></center></td> 
       <td><center><input type="checkbox" name="free" value="fri09"></center></td> 
      </tr> 
     </table> 
    </body> 
</html>

Fuente

2012-03-16 14:51:03 Tom

Gracias, esto funcionó perfectamente para mí. Solo una pregunta más, ¿sabes cómo lograr que la celda de la tabla cambie de color una vez que está marcada? –

Cambié el código; debería funcionar – Tom

Funciona muy bien, gracias.El único problema que tengo ahora es que solo colorea en la parte media de la celda. Aquí hay una captura de pantalla de lo que obtengo. http://i.imgur.com/bDrBU.png –

-1

te gustaría algo como esto. No del todo despierto todavía, así que probablemente no va a funcionar, pero básicamente:

$('input[type="checkbox"]').each(function() { // find all checkboxes 
    $(this).parent('td').click(function() { // find the td containing the checkbox 
     // attach a click even to the td which toggles the checkbox within 
     cb = $(this).children('input[type="checkbox"]'); 
     cb.checked = !cb.checked; 
    }); 
});

Fuente

2012-03-16 14:44:16

puse here un demo para que

Básicamente lo que necesita es

$(function(){ 
    $("td").click(function(){ 
     $(this).find('input').attr('checked', true); 
    }); 
});

Fuente

2012-03-16 14:44:49 themarcuz

Por qué no usar una pura Solución de CSS? Esto hace uso de la etiqueta de etiqueta para lograr lo que desea.

<tr> 
    <td><center>9:00 - 10:00</center></td> 
    <td><label><input type="checkbox" name="free" value="mon09"></label></td> 
    <td><label><input type="checkbox" name="free" value="tue09"></label></td> 
    <td><label><input type="checkbox" name="free" value="wed09"></label></td> 
    <td><label><input type="checkbox" name="free" value="thu09"></label></td> 
    <td><label><input type="checkbox" name="free" value="fri09"></label></td> 
</tr> 

<style type="text/css"> 
    td label { 
     display: block; 
     text-align: center; 
    } 
</style>

Para una demostración de trabajo más avanzado, mira esto http://jsfiddle.net/8q5TQ/7/

Fuente

2012-03-16 14:47:38 Sushil

http://jsfiddle.net/qqc8U/ aquí está el ejemplo haciendo uso de HTML proporcionado por usted – Sushil

¿Intenté esto, no funciona en mi mesa por alguna razón? –

+1 Estaba a punto de publicar una respuesta similar, pero me ganaste al máximo, así que simplemente pegué mi HTML en tu respuesta. Espero que esté bien. De lo contrario, haga clic en el botón Editar y use el menú desplegable en la parte superior del formulario de edición para retroceder. –

Usted puede probar esto, check this fiddle

$(function(){ 
    $('table tr td').on('click', function(e){ 
     if(e.target.type=="checkbox") 
     {   
      if($(this).is(':checked')) $(this).attr('checked', false); 
      else $(this).attr('checked', true); 
      return; 
     } 
     else 
     { 
      if($(this).find('input:checkbox').is(':checked')) 
       $(this).find('input:checkbox').attr('checked', false); 
      else 
       $(this).find('input:checkbox').attr('checked', true); 
     } 
    }); 
});

Fuente

2012-03-16 14:48:54

Mi Función para cheques en la tabla:

function Checkpoint() { 
     var chks = document.getElementById("idmytable").getElementsByTagName("input"); 
    for (var i=0; i<chks.length; i++) 
     { 
      if (chks[i].type == "checkbox" & chks[i].checked==true) 
       { 
        alert(chks[i].id); 
       } 
     } 
    }

Fuente

2015-10-02 07:29:24

¡Por favor explique su respuesta, las respuestas de 'código' son altamente desaconsejables! –

que era capaz de hacerlo funcionar después de aplicar el atributo 'para' al elemento de etiqueta:

<tr> 
    <td><center>9:00 - 10:00</center></td> 
    <td><label for="mon09"><center><input type="checkbox" name="free" value="mon09" id="mon09"></center></label></td> 
    <!-- etc. --> 
</tr>

Fuente

2016-10-18 19:32:39

Marque una casilla de verificación en una celda de la tabla haciendo clic en cualquier lugar de la celda de la tabla

Respuesta

Cuestiones relacionadas