How can I select a 5% of checkboxes in a table randomly?-CodePudding

Using this script to select a random number of rows in a data table. Now it is defined minimum and maximum number to select. This not need, need to select a 5% of rows.
Is it possible to make this to select 5% of rows of all rows in the data table randomly?

// Select Random Numbers
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_random').on('click', function() {
  if ($(this).prop('checked')) {
    let minnum = 3,
      maxnum = 50
    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_random"></label>
<div class='cb'>
  <input type='checkbox' class='check'> checkbox1 <br />
  <input type='checkbox' class='check'> checkbox2 <br />
  <input type='checkbox' class='check'> checkbox3 <br />
  <input type='checkbox' class='check'> checkbox4 <br />
  <input type='checkbox' class='check'> checkbox5 <br />
  <input type='checkbox' class='check'> checkbox6 <br />
  <input type='checkbox' class='check'> checkbox7 <br />
  <input type='checkbox' class='check'> checkbox8 <br />
  <input type='checkbox' class='check'> checkbox9 <br />
  <input type='checkbox' class='check'> checkbox10 <br />
  <input type='checkbox' class='check'> checkbox11 <br />
  <input type='checkbox' class='check'> checkbox12 <br />
  <input type='checkbox' class='check'> checkbox13 <br />
  <input type='checkbox' class='check'> checkbox14 <br />
  <input type='checkbox' class='check'> checkbox15 <br />
  <input type='checkbox' class='check'> checkbox16 <br />
  <input type='checkbox' class='check'> checkbox17 <br />
  <input type='checkbox' class='check'> checkbox18 <br />
  <input type='checkbox' class='check'> checkbox19 <br />
  <input type='checkbox' class='check'> checkbox20 <br />
  <input type='checkbox' class='check'> checkbox21 <br />
  <input type='checkbox' class='check'> checkbox22 <br />
</div>

CodePudding user response：

Try this:

// Select Random Numbers
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_random').on('click', function() {
  if ($(this).prop('checked')) {
    let percent = 33
    let total = $('.check').length
    let selnum = Math.ceil(percent / 100.0 * total)
    console.log(selnum, percent / 100.0)
    let minnum = selnum
    let maxnum = selnum
    
    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_random"></label>
<div class='cb'>
  <input type='checkbox' class='check'> checkbox1 <br />
  <input type='checkbox' class='check'> checkbox2 <br />
  <input type='checkbox' class='check'> checkbox3 <br />
  <input type='checkbox' class='check'> checkbox4 <br />
  <input type='checkbox' class='check'> checkbox5 <br />
  <input type='checkbox' class='check'> checkbox6 <br />
  <input type='checkbox' class='check'> checkbox7 <br />
  <input type='checkbox' class='check'> checkbox8 <br />
  <input type='checkbox' class='check'> checkbox9 <br />
  <input type='checkbox' class='check'> checkbox10 <br />
  <input type='checkbox' class='check'> checkbox11 <br />
  <input type='checkbox' class='check'> checkbox12 <br />
  <input type='checkbox' class='check'> checkbox13 <br />
  <input type='checkbox' class='check'> checkbox14 <br />
  <input type='checkbox' class='check'> checkbox15 <br />
</div>

CodePudding user response：

You can check the below logic

Note that 5% of 22 checkboxes is 1.1 means it always ticks 1 checkbox randomly.

// Select Random Numbers
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_random').on('click', function() {
  if ($(this).prop('checked')) {
    const maxValue = $('.check').length * 0.05 //5% of checkboxes
    let rand = parseInt(Math.random() * (maxValue - 1)   1)
    //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_random"></label>
<div class='cb'>
  <input type='checkbox' class='check'> checkbox1 <br />
  <input type='checkbox' class='check'> checkbox2 <br />
  <input type='checkbox' class='check'> checkbox3 <br />
  <input type='checkbox' class='check'> checkbox4 <br />
  <input type='checkbox' class='check'> checkbox5 <br />
  <input type='checkbox' class='check'> checkbox6 <br />
  <input type='checkbox' class='check'> checkbox7 <br />
  <input type='checkbox' class='check'> checkbox8 <br />
  <input type='checkbox' class='check'> checkbox9 <br />
  <input type='checkbox' class='check'> checkbox10 <br />
  <input type='checkbox' class='check'> checkbox11 <br />
  <input type='checkbox' class='check'> checkbox12 <br />
  <input type='checkbox' class='check'> checkbox13 <br />
  <input type='checkbox' class='check'> checkbox14 <br />
  <input type='checkbox' class='check'> checkbox15 <br />
  <input type='checkbox' class='check'> checkbox16 <br />
  <input type='checkbox' class='check'> checkbox17 <br />
  <input type='checkbox' class='check'> checkbox18 <br />
  <input type='checkbox' class='check'> checkbox19 <br />
  <input type='checkbox' class='check'> checkbox20 <br />
  <input type='checkbox' class='check'> checkbox21 <br />
  <input type='checkbox' class='check'> checkbox22 <br />
</div>