Home / Questions / 186153
Accepted
raintrooper
Asked: 2020-08-04 10:07:08 +0800 CST 2020-08-04 10:07:08 +0800 CST

Identify checkbox when clicked

  • 772

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

The problem I have is that when getting the id and value of each checkbox, no matter which one I select, it only gets 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 http://jsfiddle.net/raintrooper/m8tovqbz/

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>

javascript

3 Answers

  1. Best Answer

    You just have to change your selectors to 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>

    • 1

  2. It only shows you the first one because you are not telling it to show you the one you click on, for that you have to use the word this,

    for instance:

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

    should be changed to 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 only saw it and I wrote it by eye so it may have its errors but that is the problem.

    $('.class')returns an arrayof objects, by using thisyou are telling it to only select the one that was clicked...

    • 1 

  3. //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>

    • 0