Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar color de la caja según valor elegido

JavaScript - Cambiar color de la caja según valor elegido

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Ariel
Val: 22
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por Ariel (14 intervenciones) el 22/11/2019 14:18:30
Estimados, soy nuevo en la programación y me estoy haciendo un lío bárbaro con JS.

Mi intención es poder cambiar entre dos valores un objeto y según ese valor que se elija cambiar el color de la caja.

Ejemplo: Notificado: SI o NO. Si pones SI que la caja se ponga verde y si pone NO que la caja se ponga roja pero por default que no este en ningún valor ni ningún color.

Alguien me podría dar una mano?

Mil Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por Joel (895 intervenciones) el 22/11/2019 15:09:40
Hola Ariel, nos puedes pegar el código html? de esta manera te aplico el código js en tu mismo código.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ariel
Val: 22
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por Ariel (14 intervenciones) el 22/11/2019 16:06:08
Te paso el codigo como lo tengo.. Te cuento que estoy trabajando en Laravel y Bootstrap tambien.

Yo lo que quiero es que si oprimen el Chek, me devuelva un "OK" en color verde y si no está oprimido el chek me devuelva un vacio en rojo


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="container">
    <div class="row">
        <div class="col-md-4">
          <div class="fomr-group">
            <label>Notificado</label>
            <input type="checkbox" class="form-control" name="notificado">
          </div>
         </div>
        </br>
        <div class="col-md-4">
          <div class="fomr-group">
            <label>Confirmado</label>
            <input type="checkbox" class="form-control" name="confirmado">
          </div>
        </div>
        </br>
 
        <div class="col-md-4">
            <div class="fomr-group">
                <label>Pagado</label>
                <input type="checkbox" class="form-control" name="pago">
            </div>
        </div>
        </br>
    </div>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por joel (895 intervenciones) el 22/11/2019 19:24:32
Hola Ariel, yo creo que lo suyo seria un radio button en vez de un checkbox...

De todas maneras, aquí te dejo el código entero.... si hay alguno marcado, pone OK en verde, si no vacio en color rojo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .red {color:red;}
    .red::after {content:"Vacio"}
    .green {color:green}
    .green::after {content:"OK"}
    </style>
</head>
<body>
 
<div class="container">
    <div class="row">
        <div class="col-md-4">
          <div class="fomr-group">
            <label>Notificado</label>
            <input type="checkbox" class="form-control" name="notificado">
          </div>
         </div>
        </br>
        <div class="col-md-4">
          <div class="fomr-group">
            <label>Confirmado</label>
            <input type="checkbox" class="form-control" name="confirmado">
          </div>
        </div>
        </br>
 
        <div class="col-md-4">
            <div class="fomr-group">
                <label>Pagado</label>
                <input type="checkbox" class="form-control" name="pago">
            </div>
        </div>
        </br>
    </div>
</div>
<div id="resultado" class="red"></div>
 
</body>
</html>
 
<script>
const check=document.querySelectorAll("input[type=checkbox]");
check.forEach(el=>{el.addEventListener("click", control)})
function control(e) {
    const resultado=document.getElementById("resultado");
    resultado.classList.remove("red", "green");
    for(const el of check) {
        if (el.checked) {
            resultado.classList.add("green");
            return;
        }
    }
    resultado.classList.add("red");
}
</script>

He publicado este código de ejemplo aquí: https://www.lawebdelprogramador.com/codigo/JavaScript/5679-Modificar-un-texto-segun-seleccion-de-varios-checkbox.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ariel
Val: 22
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por Ariel (14 intervenciones) el 26/11/2019 14:05:03
Mil Mil Mil GRACIAS!!!... La verdad muy útil lo que me pasaste y me esclareció bastante el tema .

Ahora, y si quisiera que solo se ponga en verde cuando los 3 checks están tildados?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar color de la caja según valor elegido

Publicado por joel (895 intervenciones) el 26/11/2019 15:25:34
Simplemente tienes que invertir el if... en vez de esto:
1
2
3
4
5
6
7
8
9
10
11
function control(e) {
    const resultado=document.getElementById("resultado");
    resultado.classList.remove("red", "green");
    for(const el of check) {
        if (el.checked) {
            resultado.classList.add("green");
            return;
        }
    }
    resultado.classList.add("red");
}

Seria esto:
1
2
3
4
5
6
7
8
9
10
11
function control(e) {
    const resultado=document.getElementById("resultado");
    resultado.classList.remove("red", "green");
    for(const el of check) {
        if (el.checked==false) {
            resultado.classList.add("red");
            return;
        }
    }
    resultado.classList.add("green");
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar