4

Tengo la siguiente tabla

introducir la descripción de la imagen aquí

Se requiere que cuando se marque la primera columna el check sea de color verde, si se marca la segunda sea de color rojo y si se marca la tercera sea de color naranja

mi codigo es el siguiente

< script >
  $("input:checkbox").on('click', function() {

    var $box = $(this);
    if ($box.is(":checked")) {
      // set all elements matching the name to unchecked        
      $(this).closest('tr').find("input:checkbox[name='check_N2[]']").prop("checked", false)
      $(this).closest('tr').find("input:checkbox[name='check_N3[]']").prop("checked", false)

      // set the orginally checked box back to 'checked'       
      $box.prop("checked", true);
    } else {
      $box.prop("checked", false);
    }
  }); <
/script>
<tr>
  <td style="text-align:center"><input type="hidden" value="<?php echo $value_N2['id']; ?>" name="id_N2[]"> <strong><?php echo $value_N2['codigo']; ?> </strong></td>
  <td style="text-align: justify;"><strong><?php echo $value_N2['descripcion']; ?> </strong></td>
  <td style="text-align:center"><input type="checkbox" value="1" name="check_N2[]" checked disabled></td>
  <td style="text-align:center"><input type="checkbox" value="2" name="check_N2[]" checked disabled></td>
  <td style="text-align:center"><input type="checkbox" value="3" name="check_N2[]" checked disabled></td>
</tr>

<tr>
  <td style="text-align:center"><input type="hidden" value="<?php echo $value_N3['id']; ?>" name="id_N3[]"> <strong><?php echo $value_N3['codigo']; ?> </strong></td>
  <td style="text-align: justify;">
    <?php echo $value_N3['descripcion']; ?>
  </td>
  <td style="text-align:center"><input type="checkbox" value="1" name="check_N3[]"></td>
  <td style="text-align:center"><input type="checkbox" value="2" name="check_N3[]" checked=""></td>
  <td style="text-align:center"><input type="checkbox" value="3" name="check_N3[]"></td>
</tr>

2 respuestas 2

2

EL CHECKBOX QUE VIENE POR DEFAULT NO SE PUEDE CAMBIAR
Pero podemos usar otras cosas a cambio:

Con el uso de CSS puedes crear custom checkboxes, y darles el color que quieras
Luego, puedes darles el color a cada uno de ellos llamandolos por ID.

/* los checkboxes */
#c1 input:checked ~ .checkmark {
background-color: black;
}
#c2 input:checked ~ .checkmark {
background-color: red;
}
#c3 input:checked ~ .checkmark {
background-color: green;
}
#c4 input:checked ~ .checkmark {
background-color: blue;
}

/* Contenedor */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

/* escondemos el default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* creamos un custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* Al pasar el mouse encima, lo ponemos gris */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* creamos el marcador (escondido al no seleccionar) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* mostramos el marcador al seleccionar */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* estilo del marcador */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<!DOCTYPE html>
<html>
<body>

<label class="container" id="c1">Uno
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container" id="c2">Dos
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container" id="c3">Tres
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container" id="c4">Cuatro
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

</body>
</html>

3
  • Lo que se necesita es cambiar el color del Check que ya está, no pintarlo de nuevo el 20 nov. 2020 a las 20:10
  • 3
    Buena respuesta, creo que solo falta agregar que no es posible dar estilo directamente a checkboxes o radios, cada navegador los presenta en forma diferente y la única opción es sobreponer otro elemento. +1
    – Triby
    el 20 nov. 2020 a las 20:26
  • Tal y como dice Triby, pense que habia quedado claro pero parece que no.
    – Excorpion
    el 21 nov. 2020 a las 21:17
2

Actualización 2023: desde 2021 existe la propiedad accent-color en CSS, que permite cambiar el color de acento de ciertos elementos: los <input> de tipo checkbox, radio y range; y los <progress>. Esta propiedad se aplica directamente y se le indica un color, sin más:

.accent-red {
    accent-color: red;
}

.accent-green {
    accent-color: #00ff00;
}

.accent-blue {
    accent-color: hsl(240deg, 100%, 50%);
}
<input type="radio" class="accent-red" name="a" value="1">
<input type="radio" class="accent-green" name="a" value="2">
<input type="radio" class="accent-blue" name="a" value="3">

Tu Respuesta

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

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