jQuery Ajax checkbox state

Question

Tengo casillas de verificación en mi página para las cuales me gustaría enviar su estado a la base de datos a través de ajax. Sé cómo usar jquery con ajax, pero no sé cómo obtener el estado comprobado, marcado y desmarcado junto con la identificación de la casilla de verificación para poder enviarlo de vuelta al servidor.

¿Alguna idea?

Answer 1

if ($("#yourCheckboxID").is(":checked")) { 
    // checkbox is checked 
} else { 
    // checkbox is not checked 
} 

hará el trabajo.

Answer 2

Bueno, es bastante fácil de encontrar las casillas de verificación:

$(':checkbox').whatever() 

El truco es que en HTML casillas de verificación sólo tienen un valor que es significativo cuando se comprueba . Cuando no están marcados, ¿qué le dices al servidor?

Bueno, si tiene una convención para trabajar (tal vez siempre enviando "verdadero" cuando está marcado y "falso" cuando no está marcado), lo siguiente que tiene que decidir es cómo llevarlos a su servidor. Puede utilizar la función de jQuery param convertir la lista en una cadena de parámetros:

var params = $.param($(':checkbox').map(function() { 
    return { name: this.id, value: !!this.checked }; 
})); 

Eso le da una cadena lista para ser añadidas a una URL, o enviar como datos a través de $.ajax.

Answer 3

Algo como esto:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("input:checkbox").change(function() { 
      if($(this).is(":checked")) { 
       $.ajax({ 
        url: 'on_off.aspx', 
        type: 'POST', 
        data: { strID:$(this).attr("id"), strState:"1" } 
       }); 
      } else { 
       $.ajax({ 
        url: 'on_off.aspx', 
        type: 'POST', 
        data: { strID:$(this).attr("id"), strState:"0" } 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 4

Combinando su solución y la respuesta aceptada por Ain:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
    $.ajax({ 
      url: 'on_off.aspx', 
      type: 'POST', 
      data: { strID:$("input:checkbox").attr("id"), strState:isChecked } 
    });   
    }); 
</script> 

Answer 5

Adición de nuevo en el evento de cambio de la solución resultante de la fusión. Quiere que esto se active cada vez que se cambie la casilla de verificación.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("input:checkbox").change(function() { 
      var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
      $.ajax({ 
       url: 'on_off.aspx', 
       type: 'POST', 
       data: { strID:$("input:checkbox").attr("id"), strState:isChecked } 
      });   
     });   
    }); 
</script>