La siguiente forma:

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

Es la primera parte de una suscripción. Aquí, el usuario puede elegir entre un mes o dos meses de suscripción.

Si el usuario acepta recibir añade, deja la casilla marcada, que será de todo, él/ella puede golpear el botón siguiente y aceptar.

Pero si el usuario desactiva el «añade con» casilla de verificación, un div se muestran en el lugar de la #radioButtonsWithAdds que contiene otro conjunto de botones de radio con diferentes precios.

¿Cómo puedo detectar que la casilla de verificación ish sin golpear ningún botón de enviar?

InformationsquelleAutor user523129 | 2011-01-27

5 Comentarios

  1. 13
    $('#yourcheckbox').change(function() {
    
       if ( ! this.checked) {
           //It is not checked, show your div...
    
       }
    
    });
    • Gracias, funcionó
  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();
            }
        })
    })

    Aquí está un ejemplo rápido:
    http://jsfiddle.net/efhHF/2/

  3. 1

    También podrías hacer algo como esto:

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

    Usted necesita para unirse a un detector de eventos y comprobar el estado allí.

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

    Intentar usar esta

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

    Aquí va la función JS

    function mostra(){
        if (document.getElementById("sumula").style.display != "none"){
            document.getElementById("sumula").style.display = "none";
        }else{
            document.getElementById("sumula").style.display = "block";
        }
    }
    • +1 para que la única respuesta con puro JS.. 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here