Foros del Web » Programando para Internet » Javascript »

checkbox color con celda

Estas en el tema de checkbox color con celda en el foro de Javascript en Foros del Web. como puedo darle color al fondo de una celda ?? al seleccionar un checkbox ?? y al deseleccionar que pierda el color ? ejemplo:...
  #1 (permalink)  
Antiguo 06/05/2010, 15:31
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 3 meses
Puntos: 11
checkbox color con celda

como puedo darle color al fondo de una celda ?? al seleccionar un checkbox ?? y al deseleccionar que pierda el color ?

ejemplo:

  #2 (permalink)  
Antiguo 06/05/2010, 16:44
 
Fecha de Ingreso: mayo-2010
Mensajes: 25
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: checkbox color con celda

Código Javascript:
Ver original
  1. $(':checkbox').click(function(){
  2.   if($(this).attr('checked') == true) {
  3.     $(this).parent().attr('style','background:#ff0000;')
  4.   } else {
  5.     $(this).parent().removeAttr('style')
  6.     // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  7.   }
  8. })

eso esta hecho con jquery espero te sirva

aca la api con todas las funciones
[URL="http://api.jquery.com/"]http://api.jquery.com/[/URL]
  #3 (permalink)  
Antiguo 07/05/2010, 07:28
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 3 meses
Puntos: 11
Respuesta: checkbox color con celda

muchas gracias funciona super bien. cuando le hago click.

Pero que sucede en el caso que si ya el checkbox se encuentra marcado.

Código HTML:
Ver original
  1. <input type="checkbox" name="checkbox" id="check1" value="checkbox" checked>

cuando cargue la pagina como lo va a reconocer ?


Código HTML:
Ver original
  1. <script src="jquery.js" type="text/javascript"></script>
  2.  
  3. <script languaje="javascript">
  4.  
  5.  $(document).ready(function(){
  6.  
  7.     $('#check1').load(function(){
  8.       if($(this).attr('checked') == true) {
  9.         $(this).parent().attr('style','background:#ff0000;')
  10.       } else {
  11.         $(this).parent().removeAttr('style')
  12.         // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  13.       }
  14.     })
  15.  
  16. });
  17.  
  18.  
  19. <div align="left">
  20.   <table width="200" border="1" cellspacing="1" cellpadding="1">
  21.     <tr>
  22.       <th scope="col"><div align="center">
  23.         <input type="checkbox" name="checkbox" id="check1" value="checkbox" checked>
  24.       </div></th>
  25.       <th scope="col"><div align="center">
  26.         <input type="checkbox" name="checkbox2" value="checkbox">
  27.       </div></th>
  28.       <th scope="col"><div align="center">
  29.         <input type="checkbox" name="checkbox3" value="checkbox">
  30.       </div></th>
  31.     </tr>
  32.     <tr>
  33.       <td><div align="center">
  34.         <input type="checkbox" name="checkbox6" value="checkbox">
  35.       </div></td>
  36.       <td><div align="center">
  37.         <input type="checkbox" name="checkbox5" value="checkbox">
  38.       </div></td>
  39.       <td><div align="center">
  40.         <input type="checkbox" name="checkbox4" value="checkbox">
  41.       </div></td>
  42.     </tr>
  43.     <tr>
  44.       <td><div align="center">
  45.         <input type="checkbox" name="checkbox7" value="checkbox">
  46.       </div></td>
  47.       <td><div align="center">
  48.         <input type="checkbox" name="checkbox8" value="checkbox">
  49.       </div></td>
  50.       <td><div align="center">
  51.         <input type="checkbox" name="checkbox9" value="checkbox">
  52.       </div></td>
  53.     </tr>
  54.     <tr>
  55.       <td><div align="center">
  56.         <input type="checkbox" name="checkbox14" value="checkbox">
  57.       </div></td>
  58.       <td><div align="center">
  59.         <input type="checkbox" name="checkbox13" value="checkbox">
  60.       </div></td>
  61.       <td><div align="center">
  62.         <input type="checkbox" name="checkbox10" value="checkbox">
  63.       </div></td>
  64.     </tr>
  65.     <tr>
  66.       <td><div align="center">
  67.         <input type="checkbox" name="checkbox15" value="checkbox">
  68.       </div></td>
  69.       <td><div align="center">
  70.         <input type="checkbox" name="checkbox12" value="checkbox">
  71.       </div></td>
  72.       <td><div align="center">
  73.         <input type="checkbox" name="checkbox11" value="checkbox">
  74.       </div></td>
  75.     </tr>
  76.   </table>
  77. </div>
  #4 (permalink)  
Antiguo 07/05/2010, 07:50
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 2 meses
Puntos: 839
Respuesta: checkbox color con celda

Puedes usar el selector checked:
Código Javascript:
Ver original
  1. $(function() {
  2.     $(":checkbox:checked").each(function(i) {
  3.         // El mismo código que cuando se hace click
  4.     });
  5. });
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 07/05/2010, 08:22
 
Fecha de Ingreso: marzo-2010
Mensajes: 432
Antigüedad: 14 años, 3 meses
Puntos: 11
Respuesta: checkbox color con celda

a muchas gracias entonces el código quedaría así.


Código Javascript:
Ver original
  1. <script languaje="javascript">
  2.  
  3. $(document).ready(function(){
  4.  
  5.     $(':checkbox').click(function(){
  6.       if($(this).attr('checked') == true) {
  7.         $(this).parent().attr('style','background:#ff0000;')
  8.       } else {
  9.         $(this).parent().removeAttr('style')
  10.         // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  11.       }
  12.     })
  13.    
  14.    
  15.     $(function() {
  16.     $(":checkbox:checked").each(function(i) {
  17.  
  18.      if($(this).attr('checked') == true) {
  19.         $(this).parent().attr('style','background:#ff0000;')
  20.       }
  21.      
  22.       else {
  23.         $(this).parent().removeAttr('style')
  24.         // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  25.       }  
  26.    
  27.         });
  28.    
  29.     });
  30.    
  31.  
  32. });
  33. </script>
  #6 (permalink)  
Antiguo 07/05/2010, 08:36
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 2 meses
Puntos: 839
Respuesta: checkbox color con celda

O, para no estar repitiendo código:
Código Javascript:
Ver original
  1. $(function(){
  2.     $(':checkbox').click(checked);
  3.     $(":checkbox:checked").each(checked);
  4. });
  5.  
  6. function checked() {
  7.     if($(this).attr('checked') == true) {
  8.         $(this).parent().attr('style','background:#ff0000;')
  9.     } else {
  10.         $(this).parent().removeAttr('style')
  11.         // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  12.     }
  13. }
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Etiquetas: celda, checkbox, color
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:26.