dimanche 6 août 2017

One checkbox at a time JavaScript

Let me start by saying, I have seen very similar questions and yes; I have read through and tried to implement the suggested solutions. I am trying to have it so that only one checkbox in a row can be selected at a time. The most common answer I have seen is this one;

$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);  
});

This solution did work for me, but that was before I was creating my table dynamically. Here is my code currently. It is pulling the table data from a MySQL table via a JSON $.post.

        function load() {   


            $.post(
            "Returnsmedb.php",
            function (response) {

                var block = []

                index = 0;
                for (var item in response){

                    var objectItem = response[item];

                  var firstname = objectItem.fname;
                  var lastname = objectItem.lname;
                  var username = objectItem.uname;
                  var email = objectItem.email;
                  var password = objectItem.password;
                  var deny = document.createElement("input");
                  deny.type = "checkbox";
                  deny.className = "chk";
                  deny.name = "deny";
                  deny.id = "deny";
                  var approve = document.createElement("input");
                  approve.type = "checkbox";
                  approve.className = "chk";
                  approve.name = "approve";
                  var moreinfo = document.createElement("input");
                  moreinfo.type = "checkbox";
                  moreinfo.className = "chk";
                  moreinfo.name = "moreinfo";

                    block.push(firstname);
                    block.push(lastname);
                    block.push(username);
                    block.push(email);
                    block.push(password);
                    block.push(deny);
                    block.push(approve);
                    block.push(moreinfo);

                    dataset.push(block);
                    block = [];


                }




                 var data = [" First Name", " Last Name "," User Name ", " Email ", "Password", " Deny", "Approve", "More Information"]

                tablearea = document.getElementById('usersTable');
                table = document.createElement('table');
                thead = document.createElement('thead');
                tr = document.createElement('tr');

                for (var i = 0; i < data.length; i++) {
                    var headerTxt = document.createTextNode(data[i]);
                    th = document.createElement('th');
                    th.appendChild(headerTxt);
                    tr.appendChild(th);
                    thead.appendChild(tr);
                }

                table.appendChild(thead);


                for (var i = 0; i < dataset.length; i++) {
                    tr = document.createElement('tr');
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td')); //Added for checkbox
                    tr.appendChild(document.createElement('td')); //Added for checkbox
                    tr.appendChild(document.createElement('td')); //Added for checkbox


                    tr.cells[0].appendChild(document.createTextNode(dataset[i][0]));
                    tr.cells[1].appendChild(document.createTextNode(dataset[i][1]));
                    tr.cells[2].appendChild( document.createTextNode(dataset[i][2]));
                    tr.cells[3].appendChild( document.createTextNode(dataset[i][3]));
                    tr.cells[4].appendChild( document.createTextNode(dataset[i][4]));
                    tr.cells[5].appendChild((dataset[i][5])); //
                    tr.cells[6].appendChild((dataset[i][6])); //
                    tr.cells[7].appendChild((dataset[i][7])); //
                    table.appendChild(tr);                   
                }

                tablearea.appendChild(table);
            }, 'json'
        );           
}

I have tried pasting the common solution in various areas but I still cannot get it to work. Any help would be greatly appreciated.

Thanks!




Aucun commentaire:

Enregistrer un commentaire