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
    Commented el 24 sept. 2019 a las 20:57
  • Y los checks? dónde los tienes?
    – DaxTter77
    Commented el 24 sept. 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
    Commented el 24 sept. 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 Commented el 24 sept. 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
    Commented el 25 sept. 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

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.