0

necesito cambiar el estilo de un input boton cuando se seleccione un check son 4 checks por lo tanto son colores diferentes.
El problema es que son 100 botons que deben cambiar de color dependiendo del chekck.

  <input type='button' value=' 1 ' id="button1" class="btnIB">
<input type='button' value=' 2 ' id="button2" class="btnIB">




function checksGreen(){
    document.getElementById('button1').style.backgroundColor = "green"; 
}
function checksOrange(){
    document.getElementById('button1').style.backgroundColor = "orange"; 
}
function checksRed(){
    document.getElementById('button1').style.backgroundColor = "red"; 
}
function checksPurple(){
    document.getElementById('button1').style.backgroundColor = "purple"; 
}
3
  • 1
    Mira Cómo preguntar para que tu pregunta sea mejor recibida, tener que explicar mejor tu problema y qué es lo que has intentado con los errores que te ha generado. A parte, haz el Recorrido para que puedas ganar tu primera medalla!
    – DaxTter77
    el 24 sep. 2019 a las 20:57
  • Y los checks? dónde los tienes?
    – DaxTter77
    el 24 sep. 2019 a las 20:58
  • Paola es super importante que leas los enlaces que te pasaron. El sitio tiene un orden y es importante que se mantenga asi. Si necesitas agregar informacion, usa el boton editar. Pero lee los enlaces.
    – gbianchi
    el 24 sep. 2019 a las 23:31

2 respuestas 2

0

Una forma de hacer lo que quieres, y que no tengas que hacer tantos cambios, es esta, cada uno de los checks llama a una función con el evento click y el revisa sí está seleccionado o no y dependiendo aplica el color que le asignas o lo deja "predeterminado"

function checksGreen(check){
    if(check.checked){
      document.getElementById('button1').style.backgroundColor = "green"; 
    }else{
      document.getElementById('button1').style.backgroundColor = "gray"; 
    }
}
function checksOrange(check){
    if(check.checked){
      document.getElementById('button1').style.backgroundColor = "orange";
    }else{
      document.getElementById('button1').style.backgroundColor = "gray"; 
    }
}
function checksRed(check){
    if(check.checked){
      document.getElementById('button1').style.backgroundColor = "red";  
    }else{
      document.getElementById('button1').style.backgroundColor = "gray"; 
    }
}
function checksPurple(check){
    if(check.checked){
      document.getElementById('button1').style.backgroundColor = "purple"; 
    }else{
      document.getElementById('button1').style.backgroundColor = "gray"; 
    }
}
 <input type='button' value=' 1 ' id="button1" class="btnIB">
<input type='button' value=' 2 ' id="button2" class="btnIB">

<input type="checkbox" id="checkGreen" onclick="checksGreen(this)">
<input type="checkbox" id="checkRed" onclick="checksRed(this)">
<input type="checkbox" id="checPurple" onclick="checksPurple(this)">
<input type="checkbox" id="checkOrange" onclick="checksOrange(this)">

Pero también hay formas de hacerlo que no más se una función y cosas así, pero ahí te dejo este método, alguna duda o sugerencia, me la comentas, espero que te sirva, saludos!!

2
  • muchas gracias. ocupe algo muy similar a esto y me diste la idea del else el 24 sep. 2019 a las 22:14
  • @PaolaRobles Me alegro que te haya servido, recuerda que si te funcionó puedes marcar la respuesta como correcta, suerte con tu proyecto, saludos!
    – DaxTter77
    el 25 sep. 2019 a las 13:32
0

Prueba con agregar un Listener que escuche los cambios de cada checkbox

html:

<input type="checkbox" class="checkbox" data-color="red" >

Jquery:

$('.checkbox').change(function() {

    if( $(this).is(':checked') ) {
        var color = $(this).data('color'); # para selecionar un valor del data-color='red' 

        $('button').style.backgroundColor = color;
    } else {
        // Checkbox is not checked..
    }
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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