checkbox color con celda

[tazzwt]

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

ejemplo:

[gonza_06]

Código Javascript:

$(':checkbox').click(function(){
  if($(this).attr('checked') == true) {
    $(this).parent().attr('style','background:#ff0000;')
  } else {
    $(this).parent().removeAttr('style')
    // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
  }
})
 

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]

[tazzwt]

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:

<input type="checkbox" name="checkbox" id="check1" value="checkbox" checked>
 

cuando cargue la pagina como lo va a reconocer ?

Código HTML:

<script src="jquery.js" type="text/javascript"></script>
 
<script languaje="javascript">
 
 $(document).ready(function(){
 
    $('#check1').load(function(){
      if($(this).attr('checked') == true) {
        $(this).parent().attr('style','background:#ff0000;')
      } else {
        $(this).parent().removeAttr('style')
        // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
      }
    })
 
});
</script>
 
 
<div align="left">
  <table width="200" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <th scope="col"><div align="center">
        <input type="checkbox" name="checkbox" id="check1" value="checkbox" checked>
      </div></th>
      <th scope="col"><div align="center">
        <input type="checkbox" name="checkbox2" value="checkbox">
      </div></th>
      <th scope="col"><div align="center">
        <input type="checkbox" name="checkbox3" value="checkbox">
      </div></th>
    </tr>
    <tr>
      <td><div align="center">
        <input type="checkbox" name="checkbox6" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox5" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox4" value="checkbox">
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input type="checkbox" name="checkbox7" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox8" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox9" value="checkbox">
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input type="checkbox" name="checkbox14" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox13" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox10" value="checkbox">
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input type="checkbox" name="checkbox15" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox12" value="checkbox">
      </div></td>
      <td><div align="center">
        <input type="checkbox" name="checkbox11" value="checkbox">
      </div></td>
    </tr>
  </table>
</div>
 

[David]

Puedes usar el selector checked:

Código Javascript:

$(function() {
    $(":checkbox:checked").each(function(i) {
        // El mismo código que cuando se hace click
    });
});
 

[tazzwt]

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

Código Javascript:

<script languaje="javascript">
 
$(document).ready(function(){
 
    $(':checkbox').click(function(){
      if($(this).attr('checked') == true) {
        $(this).parent().attr('style','background:#ff0000;')
      } else {
        $(this).parent().removeAttr('style')
        // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
      }
    })
    
    
    $(function() {
    $(":checkbox:checked").each(function(i) {
 
     if($(this).attr('checked') == true) {
        $(this).parent().attr('style','background:#ff0000;')
      }
      
      else {
        $(this).parent().removeAttr('style')
        // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
      }   
    
        });
    
    });
    
 
});
</script>
 

[David]

O, para no estar repitiendo código:

Código Javascript:

$(function(){
    $(':checkbox').click(checked);
    $(":checkbox:checked").each(checked);
});
 
function checked() {
    if($(this).attr('checked') == true) {
        $(this).parent().attr('style','background:#ff0000;')
    } else {
        $(this).parent().removeAttr('style')
        // o $(this).parent().attr('style','background:#ff0000;') y elejis el color si no esta seleccionado
    }
}