How can I select a random amount of checkboxes?

Question

    $('#select_all').on('click', function () {
        if (this.checked) {
            $('.check').each(function () {
                this.checked = true;
            });
        } else {
            $('.check').each(function () {
                this.checked = false;
            });
        }
    });
    $('.check').on('click', function () {

        if ($('.check:checked').length == $('.check').length) {
            $('#select_all').prop('checked', true);
        } else {
            $('#select_all').prop('checked', false);
        }
    });

Need to alter this above Select All code to only select some random amount of check boxes, like below code example. Any help for this?

$(".random-pick").click(function() {
  var maxAllowed = 6;
  // Count checkboxes
  var random_checkboxes = $("#content_subscribtion_ input.checkbox").size();
  // Check random checkboxes until "maxAllowed" limit reached
  while ($("#content_subscribtion_ input.checkbox:checked").size() < maxAllowed) {
    // Pick random checkbox
    var random_checkbox = Math.floor(Math.random() * random_checkboxes) + 1;
    // Check it
    $("#content_subscribtion_ input.checkbox:nth-child(" + random_checkbox + ")").prop("checked", true);
  }

  return false;
});

Why can't you just copy the code from the example you posted? — Barmar, Apr 12 '22 at 19:49

Kinglish · Accepted Answer · 2022-04-13T15:33:33.607

Using this tidy little shuffle method, we can create a random array of checkbox indexes, then slice it to a random number. We can then iterate and use jQuery's get() to find the checkbox index in the randomized array to check.

Array.prototype.shuffle = function() {
  let m = this.length, i;
  while (m) {
    i = (Math.random() * m--) >>> 0;
    [this[m], this[i]] = [this[i], this[m]]
  }
  return this;
}

$('#select_all').on('click', function() {
  if ($(this).prop('checked')) {
    let minnum = 3, maxnum = 6
    let rand = Math.min(maxnum, Math.floor(Math.random() * ($('.check').length - 1 - minnum)) + minnum)
    //create our keys array
    let keyArray = [...Array($('.check').length).keys()].shuffle().slice(0, rand)
    keyArray.forEach((chk_i, i) => {
      if (i < rand) $($('.check').get(chk_i)).prop('checked', true)
    })
  } else {
    $('.check').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select all <input type='checkbox' id="select_all"></label>
<div class='cb'>
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
  <input type='checkbox' class='check'> checkbox <br />
</div>

Thanks for the help. How to put max limit like var maxAllowed = 10; ? — Kaka, Apr 13 '22 at 14:51
Thank you very much. That works fine. IS it possible to change max value from php code? Like in one table I have 100 values and 300 in another, if I need to change max value for each table to table, can I add a php code to add this value in page and update? — Kaka, Apr 13 '22 at 17:01
PHP writes to the page before any HTML gets rendered, so you can set the `max` num variable from PHP. Or, if you're getting that info from ajax, you can set it in the ajax `success()` function. Also, if this answer helped, consider marking it as the solution by clicking the checkmark to the left of the question. — Kinglish, Apr 13 '22 at 17:54

score 0 · Answer 2 · edited Oct 06 '22 at 11:43

I have 8 checkboxes on the UI and I am selecting 3 checkboxes randomly. After each run, different checkboxes will be selected. Please use the exact/clean/proper checkbox common unique identifier in the cy.get('xxxxxx') and use following code in JS:

cy.get('section[class="table-body-cell checkbox-cell grid-1"] input')
  .then(
    ($items) => {
      return Cypress._.sampleSize($items.toArray(), 3)
    })
  .check({force: true});

How can I select a random amount of checkboxes?

2 Answers2