$('#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;
});
CodePudding user response:
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>