0
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <form action="">
      <fieldset>

        <legend>Suscripciones de correo</legend>

        <p id="subscribepara">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe">
            Me gustaría recibir el boletín vía correo-e.
          </label>
        </p>

        <p class="emailpara">
          <label>
            Email:
            <input type="text" name="email" id="email">
          </label>
        </p>

      </fieldset>
    </form>
  </body>
</html>

JavaScript:

(document).ready(function(){

                 $('#subscribe').on('click', function(){
                   var c = document.getElementById('subscribe').checked;
                   if (c) {

                    $("#email").hide();

                   }

                   else {
                     $("#email").show();

                   }


                 });

                 });

Para no hacer otro tema innecesario , he probado lo que me han dicho y aún asi no me funciona , porque? que estoy haciendo mal ahora?

3
  • Hola, ¿Buscas que de al dar seleccionar el checkbox se muestre el input, y al des seleccionarlo esconda el input una y otra vez?
    – Yikarus
    el 21 abr. 2017 a las 17:01
  • El código incluye enunciados que utilizan la sintaxis de jQuery pero no incluye la librería correspondiente. ¿Sabes que es jQuery? Por otro lado, deberías intentar usar el editor de fragmento Javascript/HTML/CSS que se incluye en el editor de preguntas/respuestas de este sitio para incluir un ejemplo mínimo verificable
    – Rubén
    el 21 abr. 2017 a las 20:25
  • He editado mi pregunta ,ayuda porfavor
    – ESCM
    el 21 abr. 2017 a las 22:00

5 respuestas 5

4

$(document).ready sirve para que una vez se haya cargado el documento, se ejecute el código que contenga esa función. Es decir, que esta función debe contener todo tu código. Luego debes añadir un evento al elemento checkbox para que cada vez que el usuario haga un cambio en su estado se compruebe si está activado o no, y por tanto oculte o muestre el input del email.

$(document).ready(function(){
  $('#subscribe').on('change',function(){
    if (this.checked) {
     $("#email").show();
    } else {
     $("#email").hide();
    }  
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
  <head>
    <title>Retos JavaScript</title>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>Suscripciones de correo</legend>
        <p id="subscribepara">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe" checked>
            Me gustaría recibir el boletín vía correo-e.
          </label>
        </p>

        <p class="emailpara">
          <label>
            Email:
            <input type="text" name="email" id="email">
          </label>
        </p>

      </fieldset>
    </form>
  </body>
</html>

Pienso que para aprender deberías utilizar JavaScript puro, y cuando ya entiendas algunos conceptos utilizar librerías como jQuery

3
  • He editado mi pregunta ,ayuda porfavor
    – ESCM
    el 21 abr. 2017 a las 22:00
  • @EduardoSebastian encerraste el javascript en etiquetas <script></script>?
    – Edwin V
    el 21 abr. 2017 a las 22:45
  • el código js está en otro archivo y no me hace falta hacer un llamado desde el html ya que estoy haciendolo desde liveweave.com y ahi ya está automatico –
    – ESCM
    el 21 abr. 2017 a las 23:05
0

Exactamente que error es el que te manda ?, a simple vista veo que estas usando la libreria Jquery pero no veo que la importes en ningun lado.

por otro lado la funcion ready de la libreria de JQuery

$(document).ready(function(){

});

Es una funcion que se llama por si solo al terminar de cargar la página, si vas a usar JQuery deberias de colocar tu funcionalidad dentro de esa funcion:

$(document).ready(function(){
     //este código se ejecuta al terminar de cargar la página.
});
3
  • He editado mi pregunta ,ayuda porfavor
    – ESCM
    el 21 abr. 2017 a las 22:00
  • que error te manda ?, como llamas al código javascript ?
    – Mikel
    el 24 abr. 2017 a las 20:45
  • ok, ya vi que usaste la página de liveware, veo que q ya oculta y muestra la caja, solo que en el javascript te falto agregar el signo inicial a la funcion ready: $(document)
    – Mikel
    el 24 abr. 2017 a las 22:32
0

El problema es la forma en como estás implementando tu parte del código de $(document).ready(function(){}) esto solo va al inicio de todo el script y no dentro de las funciones como lo estás haciendo.

Una opción para que la página haga lo que haces es la siguiente:

$(document).ready(function(){
    $('#subscribe').on("click", function(){
        var c = document.getElementById("subscribe").checked;
        if (c) {
             $("#email").show();
        }
        else {
             $("#email").hide();
        }
    });
})

Así asignarás un evento de tipo click a tu checkbox, para que cada que es cambiado su estado de check/unchecked haga el esconder y el mostrar el input del email.

Debido a que si lo dejas como está sin el evento, entonces la acción se ejecutará una sola vez y no tendrás más funcionalidad para tu checkbox una vez que el script haya terminado de ejecutarse.

1
  • He editado mi pregunta ,ayuda porfavor
    – ESCM
    el 21 abr. 2017 a las 22:01
0

Te falto la etiqueta.

<script type="text/javascript">
$(document).ready(function(){
  $('#subscribe').on('change',function(){
    if (this.checked) {
     $("#email").show();
    } else {
     $("#email").hide();
    }  
  })
});

</script>
1
  • el código js está en otro archivo y no me hace falta hacer un llamado desde el html ya que estoy haciendolo desde liveweave.com y ahi ya está automatico
    – ESCM
    el 21 abr. 2017 a las 22:15
0

Te faltó incluir el $ antes de (document).ready(function(){

A continuación el código corregido usando stacksnippet

$(document).ready(function(){

                 $('#subscribe').on('click', function(){
                   var c = document.getElementById('subscribe').checked;
                   if (c) {

                    $("#email").hide();

                   }

                   else {
                     $("#email").show();

                   }


                 });

                 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form action="">
  <fieldset>

    <legend>Suscripciones de correo</legend>

    <p id="subscribepara">
      <label>
        <input type="checkbox" name="subscribe" id="subscribe">
        Me gustaría recibir el boletín vía correo-e.
      </label>
    </p>

    <p class="emailpara">
      <label>
        Email:
        <input type="text" name="email" id="email">
      </label>
    </p>

  </fieldset>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.