如何选中和取消选中复选框，然后在表的最后一列中创建一列

Question

Night all. I have a question here. I have a table that created by javascript function I made. In that table contain a checkbox in each row and the thead has the checkbox too. I have separate the id's of the checkbox for the each row use id mycheckbox and for the thead use id mycheckbox1 .

OK now to the problem. I have to try to make all of my checkbox can be checked with the checkbox in the thead with id mycheckbox1 . I have try many code that I have found. But no one working. And I try make a fiddle with a table that I manually created with HTML and I can check all the texboxt and it work fine like this fiddle https://jsfiddle.net/minervaz/29fnt79f/1/

But when I try to use that in my page it can't work this is the code for the table that I have created

 $(document).ready(function(){ $('#submit-file').on("click",function(e){ if ($('#files').val()== "") { alert("Anda Harus Memasukkan File Terlebih Dahulu"); } else{ e.preventDefault(); $('#files').parse({ config: { delimiter: "", skipEmptyLines: false, complete: displayHTMLTable, }, before: function(file, inputElem) { //console.log("Parsing file...", file); }, error: function(err, file) { //console.log("ERROR:", err, file); }, complete: function() { //console.log("Done with all files"); } }); } }); function displayHTMLTable(results) { var table = "<table class='table table-bordered' width='90%'>"; var data = results.data; var size = -1; var check = 7; var header = "<thead><tr>"; header+= "<th width='120'>Kode Material</th>"; header+= "<th width='140'>Storage Location</th>"; header+= "<th width='130'>Movement Type</th>"; header+= "<th width='130'>Id Indentifier</th>"; header+= "<th width='120'>Date Input</th>"; header+= "<th width='80'>Netto</th>"; header+= "<th width='50'>Unit</th>"; header+= "<th width='80'>Payroll</th>"; header+= "<th><input type='checkbox' id='mycheckbox1' name='mycheckbox1' ></th>"; header+= "</tr></thead>"; table += header; table+="<tbody>"; for (i = 1; i < data.length; i++) { table += "<tr>"; var row = data[i]; var cells = row.join(",").split(","); if (cells.length < size) continue; else if (cells.length > size) size = cells.length; if (cells.length > check){ alert('Data Yang Anda Masukkan Salah'); } else{ for (j = 0; j < cells.length; j++) { var a = 1.000; var b = 10.000; var c = 20.000; var d = 45.000; var callback1 = '10.000'; var callback2 = '20.000'; var callback3 = '37.500'; var callback4 = '45.000'; table += "<td>"; table += cells[j]; table += "</td>"; } if (cells[5]> a && cells[5] <b){ table += "<td>"+ callback1 +"</td>" } else if (cells[5]> b && cells[5] <c){ table += "<td>"+ callback2 +"</td>" } else if (cells[5]> c && cells[5] <d){ table += "<td>"+ callback3 +"</td>" } table += "<td><input type='checkbox' id='mycheckbox' name='mycheckbox'></td>" table += "</tr>"; } } table+="</tbody>"; table += "</table>"; $("#parsed_csv_list").html(table); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.min.js"></script> <div class="container" style="padding:5px 5px; margin-left:5px"> <div class="well" style="width:70%"> <div class="row"> <form class="form-inline"> <div class="form-group"> <label for="files">Upload File Data :</label> <input type="file" id="files" class="form-control" accept=".csv" required /> </div> <div class="form-group"> <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> </div> </form> </div> </div> <div class="row" style="width:90%"> <form action="" id="form_data" name="form_data" method="post"> <div id="parsed_csv_list" class="panel-body table-responsive" style="width:90%"> </div> </form> </div> 

After I can checked my checkbox I want to make a new th column in the last row of the thead and in the last row of the each tbody . The value of the column is Tilting when it checked and Borongan when unchecked.

for the csv file you can download in this link https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc

Answer 1

The problem you are having is the element you are setting change event to is not present at the time of binding, so you will have to set it on a element which is present. I could give you the answer but that won't help in long run.As I am not a very good at explaining concepts I will just point you to the problem you are having with answer in it -

jQuery .on('change', function() {} not triggering for dynamically created inputs

For second part research more. (Also I did not understand)