Tengo el siguiente código, php está generando casillas de verificación en función del número de objetos. Hay una casilla de verificación por objeto, y el código en el foreach que los genera es el siguiente (NOTA: esta parte funciona bien, mi problema está a continuación):

"<input type='checkbox' name='markAsUnread' id='markRead' value='$sms->id' class='markAsUnread'>",

Aquí está el script jQuery que estoy tratando de usar para marcar cualquiera de los cuadros "cliqueados" como "leídos". Este script en particular funciona cuando se hace clic en el primer cuadro en cualquier momento, pero necesito que funcione para cualquiera de los cuadros en los que se hace clic (segundo, tercero, etc.). Solo necesito que funcione en uno a la vez, pero necesito que lo haga con cualquiera seleccionado.

<script type="text/javascript">
    var myEl = document.getElementById('markRead');

    myEl.addEventListener('click', function() {
        var bloop = $('#markRead').val();
        $.ajax({
            type: 'POST',
            url: '/link/to/route',
            data: {sms: bloop}, 
            success: function(data) {                           
                window.location = '/foo/bar';},
            contentType: "application/json",
            dataType: 'json'
        });
    }, false);
</script>

Supongo que no funciona porque solo está tomando la primera casilla, entonces, ¿qué se debe cambiar para que funcione con cualquiera de las casillas seleccionadas?

0
ruby_noobie 14 ene. 2017 a las 00:27

3 respuestas

La mejor respuesta

Así que lo resolví, iterar sobre los elementos y agregar un detector de clics dentro del iterador parecía hacer el truco:

    $(function(){
        var myElements = document.getElementsByName('markAsUnread');
        $.each(myElements, function (index){
            $(this).on("click", function(){
                $.ajax({
                    type: 'POST',
                    url: '/foo/bar',
                    data: {sms: $(this).val()}, 
                    success: function(data) {                           
                        window.location = '/back/home';},
                    contentType: "application/json",
                    dataType: 'json'
                });
            });
        });
    });

También eliminé ID de las casillas de verificación generadas por PHP, ya que no las estaba usando.

0
ruby_noobie 16 ene. 2017 a las 21:50

Eso no debería funcionar. Si crea elementos repetidamente con el mismo if, viola las reglas html. Solo puede haber uno.

En lugar de aplicar la función a un solo elemento, identificado con una ID, como

var myEl = document.getElementById('markRead');

Solicite todos los elementos con el nombre "markRead":

var myElements = document.getElementsByName('markRead');

Que te da una matriz para iterar.

Además, cambie su jquery-selector de

$('#markRead')

Para

$("[name=markRead]")

Además, asegúrese de que los valores de identificación sean realmente únicos dentro de un documento html.

1
Florian Heer 13 ene. 2017 a las 21:36

Intente seguir el script y verifique

<script type="text/javascript">
    $(function(){
     var myElements = $('input[name=markAsUnread]');

    myElements.click(function() {
        var bloop = $('input[name=markAsUnread]:checked').val();
        $.ajax({
            type: 'POST',
            url: '/link/to/route',
            data: {sms: bloop}, 
            success: function(data) {                           
                window.location = '/foo/bar';},
            contentType: "application/json",
            dataType: 'json'
        });
    }, false);

    });
</script>

Además, elimine el atributo ID de las casillas de verificación generadas o hágalo Único en lugar de tener el mismo valor para todos los elementos.

1
K D 13 ene. 2017 a las 22:20