Safe Checkbox State (checked/unchecked) in Table

API & Customization
1

Now there is a table with more than one site, where all Applicants gets displayed and they want to modify those in batches. Which works. It functions with checkboxes, you can select the checkboxes and press the button depending what you wanna change. My Problem is, that the checkboxes need to safe the State (checked/unchecked) after a reload. When you search in the table or switch the tablepage it needs to safe the state. Which doesn't work and I only seem to have it work a bit with saving the ID to sessionStorage, which is not helpful because every checkbox has the same ID. It lead to get every checkbox checked.

$('#' + view.key + ' tbody input[type=checkbox]').each(function() {
    // Iterate over the checkboxes and set their "check" values based on the session data
    var $el = $(this);
    $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
});

$
(’#’ + view.key + ’ tbody input[type=checkbox]’).on(‘change’, function() {

// save the individual checkbox in the session inside the change event, 

// using the checkbox “id” attribute

var el </span><span class="pun">=</span><span class="pln"> (this);

sessionStorage[$el.prop(‘id’)] = $el.is(’:checked’);

});

This happens because I had to add the checkboxes dynamically with jquery. There is no possibility to add different IDs I think.

// add the checkbox to to the header to select/unselect all
$('#' + view.key + '.kn-table thead tr').prepend('<th><input type="checkbox"></th>');

</span><span class="pun">(</span><span class="str">'#'</span> <span class="pun">+</span><span class="pln"> view</span><span class="pun">.</span><span class="pln">key </span><span class="pun">+</span> <span class="str">'.kn-table thead input'</span><span class="pun">).</span><span class="pln">change</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
    
(’.’ + view.key + ‘.kn-table tbody tr input’).each(function() {

</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'checked'</span><span class="pun">,</span><span class="pln"> (’#’ + view.key + ‘.kn-table thead input’).attr(‘checked’) != undefined);

});

});

// add a checkbox to each row in the table body

</span><span class="pun">(</span><span class="str">'#'</span> <span class="pun">+</span><span class="pln"> view</span><span class="pun">.</span><span class="pln">key </span><span class="pun">+</span> <span class="str">'.kn-table tbody tr'</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
    (this).prepend(’<td><input type=“checkbox” id = “chb”></td>’);

});

I thought about trying to map it somehow with the rowid, but since I'm still not experienced I don't have a clue how to do it. I made a fiddle, but in the Fiddle, there is no rowid unlike in the real table.

Someone got a suggestion?

2

Why don't you add the ID in the function that is creating the checkboxes in the first place? something like:

$('#' + view.key + '.kn-table tbody tr').each(function(i) {
 $(this).prepend('<td><input type="checkbox" id="box_" + i +"></td>');
});

Like this each checkbox should have IDs like box_0 , box_1, etc.

Than you can play with the IDs