jQuery Ajax checkbox state

Question

J'ai des cases à cocher sur ma page pour lesquelles je voudrais renvoyer leur état à la base de données via ajax. Je sais comment utiliser jquery avec ajax, mais je ne sais pas comment obtenir l'état vérifié, coché et non coché avec l'identifiant de la case à cocher pour que je puisse le renvoyer au serveur.

Des idées?

Answer 1

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

fera le travail.

Answer 2

Eh bien, il est assez facile de trouver les cases à cocher:

$(':checkbox').whatever() 

L'astuce est que dans HTML cases ont seulement une valeur qui est significative lorsque vérifié. Quand ils ne sont pas vérifiés, que dites-vous au serveur? Bien que vous ayez une convention avec laquelle travailler (peut-être en envoyant "vrai" quand cochée et "faux" quand elle n'est pas cochée), la prochaine chose à faire est de savoir comment les obtenir sur votre serveur. Vous pouvez utiliser la fonction jQuery param pour transformer la liste en une chaîne de paramètre:

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

Cela vous donne une chaîne prête à être clouée sur une URL, ou envoyées sous forme de données via $.ajax.

Answer 3

Quelque chose comme ceci:

<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

En combinant votre solution et la réponse acceptée par 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

Ajout de retour en cas de changement à la solution fusionnée. Vous voulez que cela se déclenche à chaque fois que la case à cocher est modifiée.

<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>