none
OBTENER VALOR DE CADA CAMPO DE UNA FILA CON JQUERY RRS feed

  • Pregunta

  • Saludos Foro, espero pueda alguien ayudarme.

    Tengo una vista parcial que me muestra una tabla que se carga por cada objeto de mi modelo. El punto es que necesito con jquery, el campo ID de cada fila que tiene el checkbox seleccionado y agregarlo a un array para enviarlo al servidor.

    Asi se forma mi tabla. Alguna sugerencia, de antemano gracias.

    <table class="table-condensed" id="scDetails">
                    <thead class="text-center">
                        <tr>
                            <th>
                                <label>ID</label>
                            </th>
    
                            <th>
                                <label>ACTIVIDAD</label>
                            </th>
                            <th>
                                <label>OBSERVACION</label>
                            </th>
                            <th>
                                <label>Sel</label>
                            </th>
                    </thead>
                    <tbody style="font-size:9px" class="border">
    
                        @for (var item = 0; item < Model.Count(); item++)
                    {
    
                            <tr>
    
                                <td>
    
                                    @Html.DisplayFor(modelItem => Model[item].ID, new { id="ID", @class="ID"})
                                    @Html.HiddenFor(modelItem => Model[item].ID)
                                </td>
    
                                <td>
                                    @Html.DisplayFor(modelItem => Model[item].D_ACTIVIDAD)
                                </td>
                                <td style="border:1px">
                                    @Html.TextAreaFor(modelItem => Model[item].OBSERVACION, new { @class ="txtobservacion" ,id="textarea" })
                                </td>
                                <td>
                                    @Html.CheckBoxFor(modelItem => Model[item].ischeked, new { style = "padding:0;width:20px", id ="checkEnviar" , @class= "checkEnviar"})
                                </td>
                                <td style="border:1px">
    
                                    <button data-toggle="tooltip" title="Enviar" style="font-size:20px;border:none;background-color:white;float:left" id="Enviar"><i class="fa fa-check-circle"></i></button>
                                </td>
    
                            </tr>
                        }
    
                    </tbody>
    
                </table>

    miércoles, 4 de abril de 2018 15:59

Respuestas

  • Ponga el ID en el checkbox como un atributo data-, y luego agrega un onclick a los checkboxes para que llenen un arreglo de JS con los ID's.

    Para poner el ID en el checkbox, es muy fácil:

    @Html.CheckBoxFor(modelItem => Model[item].ischeked, new { style = "padding:0;width:20px", id ="checkEnviar" , @class= "checkEnviar", data_id = Model[item].ID })

    El JavaScript sería algo como:

    $(function() {
      $('input[data-id]').click(function() {
        var ctrl = $(this);
        var id = ctrl.data('id');
        if (ctrl.is(':checked')) {
          ids.push(id);
        }
        else {
          var i = ids.indexOf(id);
          ids.splice(i, 1);
        }
      });
    });
    

    Jose R. MCP
    Code Samples

    miércoles, 4 de abril de 2018 16:47
  • Hola Jose gracias por la respuesta la verdad me aporto mucho, aunque termine haciéndolo así.

    en el value de mi check coloque el valor id del modelo

     @Html.CheckBoxFor(modelItem => Model[item].ischeked, new { style = "padding:0;width:20px", id ="checkEnviar" , @class= "checkEnviar",value=Model[item].ID})

    y el js asi, en donde adiciono a un array cada iteraccion

    <script>
    
        
    
        $(document).ready(function () {
            //al presionar el boton 
            $("#Enviar").click(function () {
                var ids = new Array();
    
               //verifico si los check estan seleccionados que utilizan una clase
                $('.checkEnviar:checked').each(function () {
                    var id = $(this).val();
                    ids.push(id);
                    alert("El checkbox con valor " + $(this).val() + " está seleccionado");
                    alert("Array " + ids);
    
    
                    });
                
                    
                
    
    
    
            }); 
        });
    
        
    </script>
    No se si sea la mejor solución, pero me funciona tal como lo deseo. Mil gracias.

    miércoles, 4 de abril de 2018 19:40

Todas las respuestas

  • Ponga el ID en el checkbox como un atributo data-, y luego agrega un onclick a los checkboxes para que llenen un arreglo de JS con los ID's.

    Para poner el ID en el checkbox, es muy fácil:

    @Html.CheckBoxFor(modelItem => Model[item].ischeked, new { style = "padding:0;width:20px", id ="checkEnviar" , @class= "checkEnviar", data_id = Model[item].ID })

    El JavaScript sería algo como:

    $(function() {
      $('input[data-id]').click(function() {
        var ctrl = $(this);
        var id = ctrl.data('id');
        if (ctrl.is(':checked')) {
          ids.push(id);
        }
        else {
          var i = ids.indexOf(id);
          ids.splice(i, 1);
        }
      });
    });
    

    Jose R. MCP
    Code Samples

    miércoles, 4 de abril de 2018 16:47
  • Hola Jose gracias por la respuesta la verdad me aporto mucho, aunque termine haciéndolo así.

    en el value de mi check coloque el valor id del modelo

     @Html.CheckBoxFor(modelItem => Model[item].ischeked, new { style = "padding:0;width:20px", id ="checkEnviar" , @class= "checkEnviar",value=Model[item].ID})

    y el js asi, en donde adiciono a un array cada iteraccion

    <script>
    
        
    
        $(document).ready(function () {
            //al presionar el boton 
            $("#Enviar").click(function () {
                var ids = new Array();
    
               //verifico si los check estan seleccionados que utilizan una clase
                $('.checkEnviar:checked').each(function () {
                    var id = $(this).val();
                    ids.push(id);
                    alert("El checkbox con valor " + $(this).val() + " está seleccionado");
                    alert("Array " + ids);
    
    
                    });
                
                    
                
    
    
    
            }); 
        });
    
        
    </script>
    No se si sea la mejor solución, pero me funciona tal como lo deseo. Mil gracias.

    miércoles, 4 de abril de 2018 19:40
  • Hola Jose R,

    En el caso de que también quiera tomar la observación ingresada en la fila del check que selecciono como seria?; osea si quiero tomar cada campo de la fila. gracias.

    jueves, 5 de abril de 2018 13:49