rescue value of a checkbox created dynamically on the page

Question

rescue value of a checkbox created dynamically on the page

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I have a page that has a series of checkbox controls, created dynamically in a ajax call with the following function:

function fnObtieneRecetaPaciente(PacienteId) {
  var parametrosAjax = {
    "PacienteId": PacienteId
  };
  $.ajax({
    type: 'POST',
    data: JSON.stringify(parametrosAjax),
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    url: '@Url.Action("GetRecetaPaciente", "Carro")',
    success: function(RecetaPaciente) {

      if (RecetaPaciente.lstMedicamentos.length > 0) {
        var Medicamentos = "";
        $.each(RecetaPaciente.lstMedicamentos, function(idx, medicamento) {
          Medicamentos += "<div class='row' id='Medicamento_" + idx + "'>";
          Medicamentos += "<div class='col-lg-4'><div class='tcont'>" + medicamento.Medicamento + "</div></div>";
          Medicamentos += "<div class='col-lg-2'><div class='tcont'>" + medicamento.Prescripcion + "</div></div>";
          Medicamentos += "<div class='col-lg-2'><div class='tcont'>" + medicamento.Cantidad + "</div></div>";
          Medicamentos += "<div class='col-lg-3'><div class='tcont'>" + medicamento.Estado + "</div></div>";
          Medicamentos += "<div class='col-lg-1'><div class='tcont style='padding: 3.5px;'><input type='checkbox'";
          Medicamentos += "id = 'chkMedicamento_" + medicamento.MedicamentoId + "' class='chk' /></div ></div > ";
          Medicamentos += "</div>";
        });
        $('#divMedicamentos').append(Medicamentos);
      } else {
        var msgError = "paciente sin receta";
        $('#divMedicamentos').html(msgError);
      }
    },
    error: function(error) {
      var msgError = "Error al obtener los datos de la receta del paciente";
      $('#divMedicamentos').html(msgError);
    }
  });
}

This works without problems, the checkboxes are drawn on the page according to what the database tells me.

My problem arises when I want to know which of these checkboxes were selected. On the same page, I have a button that executes a function, which runs through the elements checkbox in the following way:

$('.chk').each(function() {

});

My question is: how can I know the value of the checkbox, in order to build a structure of the elements that were selected?

javascript jquery

asked by Luis Gabriel Fabres 30.06.2017 в 02:36

source

4 answers

Insert array in a table from ajax [closed] Is there a way to implement an ORM repository with a Rest service as datasource?

score 1 · Answer 1

1

I managed to solve it this way:

$('.chk').each(function () {                  
 if ($(this).prop('checked'))
 {
  alert('seleccionado --> ' + this.id)

  }
});

answered by 30.06.2017 в 03:05

score 0 · Answer 2

To know which ones were selected you should access the individual property checked in the each of each element.

Javascript example

var btn = document.getElementById('ver');
btn.addEventListener("click",function(){
 var elements = document.querySelectorAll('.chk');
 elements.forEach(function(e){
   if(e.checked)/* Verificamos si está seleccionada*/
     console.log(e.value); /* Value del Check*/
   });
});

<input type="checkbox" class="chk" value="1">1
<input type="checkbox" class="chk" value="2">2
<input type="checkbox" class="chk" value="3">3
<input type="checkbox" class="chk" value="4">4
<input type="checkbox" class="chk" value="5">5
<input type="checkbox" class="chk" value="6">6

<button type="button" class="btn btn-primary" id="ver">Ver</button>

Jquery example

$(function() {
  $('#ver').click(function(event) {
    $('.chk').each(function () {
       if($(this).prop('checked'))
         console.log(this.value);
     });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chk" value="1">1
<input type="checkbox" class="chk" value="2">2
<input type="checkbox" class="chk" value="3">3
<input type="checkbox" class="chk" value="4">4

<button type="button" class="btn btn-primary" id="ver">Ver</button>

score 0 · Answer 3

0

inside each, you access the object with this

$('.chk').each(function(){
    var chk = $(this);
    if(chk.prop('checked')){
     alert(chk.val());
  }
});

the code shows the values of the checkboxes that were selected.

answered by 30.06.2017 в 03:14

score 0 · Answer 4

Events in elements that are dynamically created are handled or captured differently in java script with jquery

$("ul#pestanas_facturacion  ").on("click", "span",function (e) {
//ACA VA LO QUE QUIERES HACER
});

In the previous example I am capturing the click event to the span element that was added dynamically to the Ul list

BEST EXPLAINED enter the description of the image here