Comment détecter qu'un utilisateur a décoché une case à cocher?

La forme suivante: 

    <form action="x.php" method="get" id="myForm">Subscribe:
<div id="radioButtonsWithAdds">
    <input type="radio" name="group1" value="one">One month 2,99$  
    <input type="radio" name="group1" value="two"> Two months   5,98$</div><br>
    <input type="checkbox" name="option1" value="withAdds" checked>  with adds
    <img src="next.png" border="0" alt="enviar" onclick="document.getElementById('myForm').submit();"> 
    </form>

Est la première partie d'un abonnement de. Ici, l'utilisateur peut choisir entre un mois ou deux mois d'abonnement.

Si l'utilisateur accepte de recevoir ajoute, laisse la case cochée, qui seront tous, il/elle peut cliquer sur le bouton suivant et c'est ok.

Mais si l'utilisateur supprime le "ajoute" case à cocher, un div affichera à la place de la #radioButtonsWithAdds un contenant à un autre ensemble de boutons radio avec des prix différents.

Comment puis-je détecter que la case à cocher ish sans frapper n'importe quel bouton soumettre?

InformationsquelleAutor user523129 | 2011-01-27
  1. 13
    $('#yourcheckbox').change(function() {

   if ( ! this.checked) {
       //It is not checked, show your div...

   }

});
    • Merci, il a travaillé
    InformationsquelleAutor alex
  2. 1

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content="test"/>
    <title></title>
  </head>
  <body>
    <form action="x.php" method="get" id="myForm" name="myForm">
      Subscribe:
      <div id="radioButtonsWithOutAdds" style="display:none;">
        <input type="radio" name="group1" value="one">One month 1,99$
        <input type="radio" name="group1" value="two"> Two months 2,98$
      </div>
      <div id="radioButtonsWithAdds">
        <input type="radio" name="group1" value="one">One month 2,99$
        <input type="radio" name="group1" value="two"> Two months 5,98$
      </div><br>
      <input type="checkbox" name="option1" value="withAdds" checked> with adds
      <img src="next.png" border="0" alt="enviar" onclick=
      "document.getElementById('myForm').submit();">
    </form>
  </body>
</html>

    JS

    $(document).ready(function(){
    $("#myForm > input[type='checkbox']").click(function(){
        if(!$(this).is(':checked'))
        {
            $("#radioButtonsWithOutAdds").show();
            $("#radioButtonsWithAdds").hide();
        }
        else
        {
            $("#radioButtonsWithOutAdds").hide();
            $("#radioButtonsWithAdds").show();
        }
    })
})

    Voici un exemple rapide:
    http://jsfiddle.net/efhHF/2/

    InformationsquelleAutor Aivan Monceller
  3. 1

    Vous pouvez aussi faire quelque chose comme ceci:

    $('input[name=subscribe]').change(function() {
   if ($(this).is(':checked')) {
     //the user selected the checkbox
   } else {
     //the user de-selected the checkbox
   }
});
    InformationsquelleAutor crmpicco
  4. 0

    Vous devez lier écouteur d'événement et de vérifier l'état là.

    $('#radioButtonsWithAdds').find('input:checkbox').bind('change', function() {
    if(this.checked) {
    }
    else {
         //the user unchecked the checkbox!
    }
});
    InformationsquelleAutor jAndy
  5. 0

    Essayez d'utiliser cette 

              <TD width=550 align=left> 
                <input type="checkbox" name="adesao" value="sim" id="parte1" onClick="mostra()" /> Sim   
                <div id="sumula" style="display:none"> 
                    <input type="radio" name="conteudo_sumula" value="1" /> <small><i>1x</i></small> 
                    <input type="radio" name="conteudo_sumula" value="2" /> <small><i>2x</i></small> 
                    <input type="radio" name="conteudo_sumula" value="3" /> <small><i>3x</i></small> 
                </div> 
          </TD>

    Voici le JS fonction

    function mostra(){
    if (document.getElementById("sumula").style.display != "none"){
        document.getElementById("sumula").style.display = "none";
    }else{
        document.getElementById("sumula").style.display = "block";
    }
}
    • +1 pour la réponse qu'avec de la pure JS.. 🙂
    InformationsquelleAutor deepcell