3

Estoy intentando manejar dentro de un formulario un rating pero estoy presentando el problema de que al seleccionar cualquier item diferente al primero siempre se me queda marcado el primer item, comparto en un snipper el codigo hmtl y css

.rating {
  position: absolute;
  /*top: 50%;*/
  /*left: 50%;*/
  transform: translate( 0, -40%) rotateY(180deg);
  display: flex;
}

.rating input {
    display: none;
}

.rating label {
    display: block;
    cursor: pointer;
    width: 45px;

}

.rating label:before {
   content: '\f005';
   font-family: fontAwesome;
   position: relative;
   display: block;
   font-size: 30px;
   color: lightgray;
}

.rating label:after {
   content: '\f005';
   font-family: fontAwesome;
   position: absolute;
   display: block;
   font-size: 30px;
   color: black;
   top: 0;
   opacity: 0;
   transition: .5s;
   text-shadow: 0 2px 5px rgba(0,0,0,.5);
}

.rating label:hover:after,
.rating label:hover ~ label:after,
.rating input:checked ~ label:after{
    opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>

    <input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>

    <input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>

    <input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>

    <input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>

    <input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>

    <input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>

    <input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>

    <input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>

    <input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>

    <input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>

    <input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>

    <input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
  </li>                                          
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="star" id="star5"><label for="star5" title="5 estrellas"></label>

    <input type="radio" name="star" id="star4"><label for="star4" title="4 estrellas"></label>

    <input type="radio" name="star" id="star3"><label for="star3" title="3 estrellas"></label>

    <input type="radio" name="star" id="star2"><label for="star2" title="2 estrellas"></label>

    <input type="radio" name="star" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>
                                        

2 respuestas 2

3

Tienes varios problemas que evitan que tu rating funcione correctamente:

  • Si deseas que cada rating funcione independientemente (que pueda haber varios de ellos seleccionados a la vez) debes darles diferente atributo name. Si no se comportarán como si fuesen parte del mismo grupo por lo que tan solo podrá haber un rating marcado simultáneamente.

  • Para evitar que solamente te funcione el primero debes usar diferentes IDs en tus <input type="radio">. Recuerda que en tu HTML el ID de tus elementos debe ser único, sin compartirse con otros.

  • El atributo for de los <label> asociados a cada <input type="radio"> debe apuntar al ID nuevo tras el cambio de IDs del paso anterior.

.rating {
  position: absolute;
  /*top: 50%;*/
  /*left: 50%;*/
  transform: translate( 0, -40%) rotateY(180deg);
  display: flex;
}

.rating input {
    display: none;
}

.rating label {
    display: block;
    cursor: pointer;
    width: 45px;

}

.rating label:before {
   content: '\f005';
   font-family: fontAwesome;
   position: relative;
   display: block;
   font-size: 30px;
   color: lightgray;
}

.rating label:after {
   content: '\f005';
   font-family: fontAwesome;
   position: absolute;
   display: block;
   font-size: 30px;
   color: black;
   top: 0;
   opacity: 0;
   transition: .5s;
   text-shadow: 0 2px 5px rgba(0,0,0,.5);
}

.rating label:hover:after,
.rating label:hover ~ label:after,
.rating input:checked ~ label:after{
    opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="stargrupo1" id="star5"><label for="star5" title="5 estrellas"></label>

    <input type="radio" name="stargrupo1" id="star4"><label for="star4" title="4 estrellas"></label>

    <input type="radio" name="stargrupo1" id="star3"><label for="star3" title="3 estrellas"></label>

    <input type="radio" name="stargrupo1" id="star2"><label for="star2" title="2 estrellas"></label>

    <input type="radio" name="stargrupo1" id="star1"><label for="star1" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="stargrupo2" id="star10"><label for="star10" title="5 estrellas"></label>

    <input type="radio" name="stargrupo2" id="star9"><label for="star9" title="4 estrellas"></label>

    <input type="radio" name="stargrupo2" id="star8"><label for="star8" title="3 estrellas"></label>

    <input type="radio" name="stargrupo2" id="star7"><label for="star7" title="2 estrellas"></label>

    <input type="radio" name="stagrupo2r" id="star6"><label for="star6" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="stargrupo3" id="star15"><label for="star15" title="5 estrellas"></label>

    <input type="radio" name="stargrupo3" id="star14"><label for="star14" title="4 estrellas"></label>

    <input type="radio" name="stargrupo3" id="star13"><label for="star13" title="3 estrellas"></label>

    <input type="radio" name="stargrupo3" id="star12"><label for="star12" title="2 estrellas"></label>

    <input type="radio" name="stargrupo3" id="star11"><label for="star11" title="1 estrella"></label>
</div>
</br>
  </li>                                          
  </br></br>
                                        
  <li class="list-group-item">
<div class="rating">
    <input type="radio" name="stargrupo4" id="star20"><label for="star20" title="5 estrellas"></label>

    <input type="radio" name="stargrupo4" id="star19"><label for="star19" title="4 estrellas"></label>

    <input type="radio" name="stargrupo4" id="star18"><label for="star18" title="3 estrellas"></label>

    <input type="radio" name="stargrupo4" id="star17"><label for="star17" title="2 estrellas"></label>

    <input type="radio" name="stargrupo4" id="star16"><label for="star16" title="1 estrella"></label>
</div>
</br>
  </li>
  </br></br>

0

Todos tus grupos de radios se llaman "star". Cambia el atributo "name", cada grupo debe tener un "name" distinto.

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.