En mi página web sobre música tengo un sistema de votación hecho con radiobotones para que los usuarios registrados asignen a cada canción una nota de 1 a 5:
<span class="estrellas mt-3 ml-2">
<?php
if($_SESSION['conectado']) for($i = 1; $i <= 5; $i++)
{
echo '<input type="radio" name="'.$id_cancion.'" value="'.$i.'"';
echo ($i == $nota) ? " checked><i></i>" : "><i></i>";
}
?>
</span>
Que se ve así (si por ejemplo le has dado 4 estrellas a una canción):
El sistema está controlado por un script jQuery que envía la información a través de .ajax()
a un archivo PHP, que es el encargado de hacer la inserción en mi base de datos MySQL:
$(function()
{
/*$('input[type=radio]:checked').click(function()
{
$(this).attr('checked', false);
})*/
$('input[type=radio]').change(function()
{
var voto = $(this).val();
var idCancion = $(this).attr('name');
var cancion = $(this).parent().parent().siblings('.row').find('.cancion').text();
var autor = $(this).parent().parent().siblings('.row').find('.autor-recopilatorio').text();
$.ajax(
{
type: 'POST', url: 'votacion.php', data: {voto: voto, id_cancion: idCancion},
success: function()
{
if(voto == 5) swal("¡Guau!", "¡Amor a primera vista!", "success");
else if(voto == 4) swal("¡Genial!", `¡Disfruta de ${autor}!`, "success");
else if(voto == 3) swal(":)", "Buena canción, ¿eh?", "success");
else if(voto == 2) swal("Vaya...", `¿No te convence ${cancion}?`, "success");
else swal("Bueno...", "No a todo el mundo le puede gustar lo mismo...", "success");
},
error: function()
{
swal("Vaya...", "Parece que tu voto no se ha podido enviar", "error");
}
})
})
});
Posteriormente, otro archivo PHP hace una llamada a la base de datos y en bucle presenta toda la información pertinente para cada canción -vídeo de Youtube, portada del disco, datos varios del artista, etc.-, incluyendo el sistema de votación cuyo código veis al principio del mensaje.
El código PHP del sistema es tal que si el usuario ha votado previamente una canción, ésta tendrá una $nota
en la base de datos y el radiobotón cuyo valor $i
coincida con ella aparecerá checked
:
<input type="radio" name="135" value=4 checked>
Bien, el sistema de votación funciona perfectamente pero a día de hoy no hay forma de borrar los votos, por lo que he empezado a modificar mi script para solucionarlo; el primer paso ha sido intentar que si el usuario hace clic en el radiobotón marcado, checked
desaparezca:
$('input[type=radio]:checked').click(function()
{
$(this).attr('checked', false);
})
Como podéis comprobar, este trozo de código es el que aparece comentado en el cuerpo del script más arriba.
Esto en apariencia funciona; si una canción tiene $nota
y se hace clic en el radiobotón cuyo value
es equivalente, el atributo checked
desaparece:
<input type="radio" name="135" value=4>
El problema es que si a continuación haces clic en otro radiobotón (en este caso, el 1, 2, 3 o 5), cambias el voto, y luego vuelves a hacer clic en el radiobotón inicial (el 4), el DOM sigue asumiendo que ése es el checked
y vuelve a borrar el voto (aunque ahora ya no sea un 4, sino otro valor de los cinco posibles).
Obviamente, luego habría muchos otros asuntos que solucionar para que esto fuera viable, pero me llama la atención este comportamiento de checked
que me he encontrado ya al principio. Intuyo que tiene que ver con diferencias entre .attr()
y .prop()
, así que a ver si me podéis echar un cable.