0

quiero comprobar que si el checkbox, esta checked por ejemplo pinte un parrafo de color amarillo, y si lo deshabilito, pues no entiendo como hacerlo funcionar, tengo este codigo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
    <script>
        if ($('#checkbox').prop('checked')) {
            $('#color').css('background','yellow');
        }
    </script>
</body>

</html>

1
  • Debes agregar el código en la función change() del checkbox en tu jQuery.
    – Bicho
    Commented el 4 mar. 2020 a las 17:13

2 respuestas 2

1

Amigo, para detectar cambios en tu checkbox utiliza la propiedad checked y con eso pregunta por el checkbox si esta chekeado.

$("#checkbox").change(function() {
if (this.checked) {
            $('#color').css('background','yellow');
        }else{
             $('#color').css('background','white');
        }


});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
</body>

</html>

1
  • 1
    muchas gracias, voy a informarme sobre lo que has puesto Commented el 4 mar. 2020 a las 18:08
0

Esto debe de funcionar

<script>

        $('body').on('click','#checkbox',function() {
            if($("#checkbox").is(':checked')) { 
                $('#color').css('background','yellow');
            }else{
                $('#color').css('background','white');
            }
     })
    </script>

Usas el metodo on click para escuchar el cambio.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
</body>

</html>
1
  • Amigo, bien tu solución y todo, pero que ocurre si checka el checkbox con la barra de espacio? o hace click en el text del checbox?, es correcta tu solución y a la vez erronea por lo que te recomiendo corregirla
    – harifo
    Commented el 4 mar. 2020 a las 17:22

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.