1

I have a dynamically created table that is filled with rows and columns of checkboxes.
Their unique id's are dynamically created as well.
I would like to store the order that the checkboxes are checked by the user in the checkboxs' values.
If a checkbox is unchecked, its value should be reset to "" or to "0".

It doesn't matter how many times a checkbox is checked and unchecked.
I only need the ultimate order, so an incrementing variable should work fine.

For example:

  • There are checkbox1 - checkbox10 and all their values are initially set to "".
  • If the user first clicked on checkbox3 its value would be set to "1".
  • If the user then clicked on checkbox5 its value would be set to "2".
  • If the user then clicked on checkbox8 its value would be set to "3".
  • If checkbox3 and checkbox5 were unclicked, their values would be reset to "".
  • If checkbox3 were checked yet again its value would be set to "4".
  • It would not matter that there was no checkbox with a value of 1 or 2.
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
RockK
  • 11
  • 2

3 Answers3

3

https://jsfiddle.net/a6fm7h9h/

$(document).ready(function() {
  var checkboxChecks = 1;

  $('input[type=checkbox]').on('change', function() {
    var $this = $(this);
    if ($this.is(':checked')) {
      $this.val(checkboxChecks++);
    } else {
      $this.val('');
    }
  });
});
input {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" value="" name="cb1" />
<input type="checkbox" value="" name="cb2" />
<input type="checkbox" value="" name="cb3" />
<input type="checkbox" value="" name="cb4" />
<input type="checkbox" value="" name="cb5" />
<input type="checkbox" value="" name="cb6" />
<input type="checkbox" value="" name="cb7" />
<input type="checkbox" value="" name="cb8" />
<input type="checkbox" value="" name="cb9" />
<input type="checkbox" value="" name="cb10" />
Sam Battat
  • 5,725
  • 1
  • 20
  • 29
  • 1
    You should use the built in SO code snippet in your answer to make this runnable right in your answer, without an external fiddle. – Soviut Sep 27 '16 at 23:43
  • This will lead to some skipped numbers... But may work well ;) +1 – Louys Patrice Bessette Sep 27 '16 at 23:43
  • @LouysPatriceBessette the OP "It would not matter that there was no checkbox with a value of 1 or 2" – Sam Battat Sep 27 '16 at 23:59
  • @SamBattat: To make it complete, if you wish, you could add some console.log() and check the "show console" in snippet editor. ;) – Louys Patrice Bessette Sep 28 '16 at 00:06
  • I just dropped the code in and everything worked perfectly with no adjustments! Thanks to you both. – RockK Sep 28 '16 at 23:49
  • @RockK You are welcome. Mark it as an answer if it helped you – Sam Battat Sep 29 '16 at 01:36
  • I ran across a small snag. All of the rows that exist when the document loads work perfectly, but checkboxes in new rows created by the user pressing the "Add Row" button don't. – RockK Oct 02 '16 at 02:38
  • Thats because they are dynamically created, when you select these items they need to be selected by a static parent `$('').on('', '', function(){....});` I'll update my answer soon – Sam Battat Oct 02 '16 at 17:24
  • There are five checkboxes on each row of the tables. The tables are static even though they are initially unpopulated. So I would use these tables as a reference to find the checkboxes? Is the checkbox change the "" ? Thanks! – RockK Oct 16 '16 at 16:09
  • Correct. So for example `$('table').on('change', 'tr td .your-dynamic-checkbox', function(){ ..... });`' – Sam Battat Oct 17 '16 at 17:22
0

You could do this:

If you don't have jQuery on your website, add this code first:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

And then, add this (which should do the trick without any modifications):

<script>
var myCount = [];
$(document).ready(function() {
    $("input[type='checkbox']").change(function() {
        if($(this).is(":checked")) {
            myCount.push($(this).attr('id'));
            $(this).val(myCount.indexOf($(this).attr('id'))+1);
        }else{
            delete myCount[myCount.indexOf($(this).attr('id'))];
            $(this).val("");
        }
    });
});
</script>

Hope this works, let me know! Cheers

Bruno García
  • 177
  • 11
  • My idea was about storing the checkbox ids, like you did... But `delete` only sets the value to `undefined`. `splice` would be a better choice. [REF](http://stackoverflow.com/a/500617/2159528). Then the index of the array could be correctly used. – Louys Patrice Bessette Sep 27 '16 at 23:57
  • Actually no, in my answer the "order" that he needs its being counted in the index of the array associated with the checkbox's id. Once you uncheck, you need to remove that checkbox's id from the array, without affecting the amounts of elements in it, so the only index associated to the id would be the last clicked. Using splice, by definition, would generate a new array with some missing elements, therefore the account would be missed. – Bruno García Sep 28 '16 at 00:08
0

Just drawing from what others posted, this seems to work fine.

$(document).ready(function() {
   var checkboxChecks = 10001;
   $('.myTablesClass').on('change', 'tr td .myInputsClass', function(){
      var $this = $(this);
      if ($this.is(':checked')) {
         $this.val(checkboxChecks++);
      } else {
         $this.val('');
      }
    });
});`
RockK
  • 11
  • 2