Identify checkbox by clicking

1

I am generating a structure dynamically, which I obtain from a json. It has the function that when clicking on the user's name will show another card in which I have 3 checkbox.

The problem I have is that by getting the id and value of each checkbox, no matter which one you select, you only get the value of the first generated checkbox.

If you can help me to correctly identify the id and value of each checkbox, thank you very much.

Link Jsfiddle link

var json = [{
  "Usuario": "Usuario1",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "UsuarioUno"
}, {
  "Usuario": "Usuario2",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "Usuario2"
}, {
  "Usuario": "Usuario3",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "Usuario3"
}];




$('#btnBuscar').click(function() {
  var Usuario = '';
  var Html = '';
  $.each(json, function(i, item) {
    Html += '<div class="col s4">' +
      '<div class="card">' +
      '    <div class="card-image waves-effect waves-block waves-light">' +
      '       <img class="activator" src="' + item.Ruta + '">' +
      '    </div>' +
      '    <ul class="card-action-buttons">' +
      '        <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-av-repeat">' +
      '        </i></a></li>' +
      '        <li><a class="btn-floating waves-effect waves-light red accent-2"><i class="mdi-action-favorite">' +
      '        </i></a></li>' +
      '        <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator">' +
      '        </i></a></li>' +
      '    </ul>' +
      '    <div class="card-content">' +
      '        <span class="card-title activator grey-text text-darken-4">' + item.Usuario + '<i class="material-icons right">more_vert</i></span>' +
      '        <p>' +
      '            <a href="#">This is a link</a></p>' +
      '    </div>' +
      '    <div class="card-reveal">' +
      '        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>' +
      '        <p>' +
      '            Here is some more information about this product that is only revealed once clicked' +
      '            on.</p>' +

      '<p>' +
      ' <input type="checkbox" id="office-' + item.Selector + '" class="lnkOffice" />' +
      '  <label for="office-' + item.Selector + '">Office 365</label>' +
      '</p>' +
      '<p>' +
      ' <input type="checkbox" id="visio-' + item.Selector + '" class="lnkVisio" />' +
      '  <label for="visio-' + item.Selector + '">Visio</label>' +
      '</p>' +
      '<p>' +
      ' <input type="checkbox" id="project-' + item.Selector + '" class="lnkProject" />' +
      '  <label for="project-' + item.Selector + '">Project</label>' +
      '</p>' +

      '   </div>' +
      '   </div>' +
      '</div>';
  });
  $("#Estructura").append(Html);

  $('.lnkOffice').click(function() {
    //                        $('input').unbind()
    var idOffice = $("input:checkbox.lnkOffice").attr("id");
    console.log(idOffice);
    var check = $('#' + idOffice).prop('checked');
    console.log(check);
  });
  $('.lnkVisio').click(function() {
    //                        $('input').unbind()
    var idVisio = $("input:checkbox.lnkVisio").attr("id");
    console.log(idVisio);
    var check = $('#' + idVisio).prop('checked');
    console.log(check);
  });
  $('.lnkProject').click(function() {
    //                        $('input').unbind()
    var idProject = $("input:checkbox.lnkProject").attr("id");
    console.log(idProject);
    var check = $('#' + idProject).prop('checked');
    console.log(check);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="form-group">
  <a id="btnBuscar" class="btn waves-effect waves-light light-blue darken-4" type="button" value="Buscar" style="width: 100%; margin-top: 10px;" />Buscar</a>
</div>
<div class="row">
  <div id="Estructura">
  </div>
</div>
    
asked by raintrooper 03.08.2018 в 20:07
source

3 answers

1

You only have to change your selectors by this . The correct way would be like this:

var json = [{
  "Usuario": "Usuario1",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "UsuarioUno"
}, {
  "Usuario": "Usuario2",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "Usuario2"
}, {
  "Usuario": "Usuario3",
  "Instalado": false,
  "Project": false,
  "Visio": false,
  "Activo": true,
  "Ruta": "https://imgur.com/a/n2EX901",
  "Selector": "Usuario3"
}];

$('#btnBuscar').click(function() {
  var Usuario = '';
  var Html = '';
  $.each(json, function(i, item) {
    Html += '<div class="col s4">' +
      '<div class="card">' +
      '    <div class="card-image waves-effect waves-block waves-light">' +
      '       <img class="activator" src="' + item.Ruta + '">' +
      '    </div>' +
      '    <ul class="card-action-buttons">' +
      '        <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-av-repeat">' +
      '        </i></a></li>' +
      '        <li><a class="btn-floating waves-effect waves-light red accent-2"><i class="mdi-action-favorite">' +
      '        </i></a></li>' +
      '        <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator">' +
      '        </i></a></li>' +
      '    </ul>' +
      '    <div class="card-content">' +
      '        <span class="card-title activator grey-text text-darken-4">' + item.Usuario + '<i class="material-icons right">more_vert</i></span>' +
      '        <p>' +
      '            <a href="#">This is a link</a></p>' +
      '    </div>' +
      '    <div class="card-reveal">' +
      '        <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>' +
      '        <p>' +
      '            Here is some more information about this product that is only revealed once clicked' +
      '            on.</p>' +

      '<p>' +
      ' <input type="checkbox" id="office-' + item.Selector + '" class="lnkOffice" />' +
      '  <label for="office-' + item.Selector + '">Office 365</label>' +
      '</p>' +
      '<p>' +
      ' <input type="checkbox" id="visio-' + item.Selector + '" class="lnkVisio" />' +
      '  <label for="visio-' + item.Selector + '">Visio</label>' +
      '</p>' +
      '<p>' +
      ' <input type="checkbox" id="project-' + item.Selector + '" class="lnkProject" />' +
      '  <label for="project-' + item.Selector + '">Project</label>' +
      '</p>' +

      '   </div>' +
      '   </div>' +
      '</div>';
  });
  $("#Estructura").append(Html);

  $('.lnkOffice').click(function() {
    //                        $('input').unbind()
    var idOffice = $(this).attr("id");
    console.log(idOffice);
    var check = $('#' + idOffice).prop('checked');
    console.log(check);
  });
  $('.lnkVisio').click(function() {
    //                        $('input').unbind()
    var idVisio = $(this).attr("id");
    console.log(idVisio);
    var check = $('#' + idVisio).prop('checked');
    console.log(check);
  });
  $('.lnkProject').click(function() {
    //                        $('input').unbind()
    var idProject = $(this).attr("id");
    console.log(idProject);
    var check = $('#' + idProject).prop('checked');
    console.log(check);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="form-group">
  <a id="btnBuscar" class="btn waves-effect waves-light light-blue darken-4" type="button" value="Buscar" style="width: 100%; margin-top: 10px;" />Buscar</a>
</div>
<div class="row">
  <div id="Estructura">
  </div>
</div>
    
answered by 03.08.2018 / 20:35
source
1

It only shows you the first one because you are not indicating that it shows you who you click, for that you have to use the word this,

for example:

 $('.lnkOffice').click(function() {
     //                        $('input').unbind()
     var idOffice = $("input:checkbox.lnkOffice").attr("id");
     console.log(idOffice);
     var check = $('#' + idOffice).prop('checked');
     console.log(check);
  });

must be changed by something like this:

 $('.lnkOffice').click(function() {
     //                        $('input').unbind()
     var idOffice = this.attr("id");
     console.log(idOffice);
     var check = $('#' + idOffice).prop('checked');
     console.log(check);

});

I have not tried it, I just saw it and wrote it to my eye so I may have its mistakes but the problem is that.

$ ('. class') returns an array of objects, by using this you are telling it to only select the one that was clicked ...

    
answered by 03.08.2018 в 20:39
0

//Seleccionas todos los elementos con clase test
var divs = document.getElementsByClassName("test");
    
    //Recorres la lista de elementos seleccionados
    for (var i=0; i< divs.length; i++) {
        //Añades un evento a cada elemento
        divs[i].addEventListener("click",function(event) {
           //Aquí la función que se ejecutará cuando se dispare el evento
           alert("El id es: " + event.target.id); //En este caso alertaremos el id del cliqueado
        });
    }
<p class="test"><input type="checkbox" id="project1"/><label>Project1</label> </p>
<p class="test"><input type="checkbox" id="project2"/><label >Project2</label> </p>
    
answered by 03.08.2018 в 21:29