Как на jquery поставить checked всем checkbox что бы флажок ставился по одному и желательно рандомно

#javascript #jquery #checkbox

Есть кучка чекбоксов, у каждого есть свой id. Хочу чтобы при загрузке документа загорелись
те, которые я хочу. Но что бы не одновременно загорелись, а через допустим 200 миллисекунд,
и в рандомном порядке.

Не могу додуматься как это сделать. Сколько не пробовал, либо загораются все сразу,
либо вообще не загораются.



 $('#sass').prop('checked',true); 


Вот так писал. Как задать им очередь не знаю
    

Ответы

Ответ 1

Выбираем все желаемые элементы.
Превращаем набор в массив.
Перемешиваем используя алгоритм Фишера-Йетса.
Для каждого элемента массива создаём задержку для изменения чекбокса.




function shuffle(a) {
  for (var m=a.length; m; ) {
    var i = Math.random() * m-- | 0;
    var t = a[i];
    a[i] = a[m];
    a[m] = t;
  }

  return a;
}

$(function () {
  var DELAY = 500;

  var els = shuffle($("#a,#c,#g,#i,#j,#k,#l,#o,#p,#s,#u,#v,#x").toArray());
  
  for (var q=0; q

a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z


Ответ 2

Для последовательного выбора чекбоксов используйте setTimeout(), предварительно поместив
необходимые id в массив и "перемешав" его. 

Важно, чтобы перечисление id чекбоксов было без пробелов и отделялось запятой, например,
'html,sass,jquery':



function check(checkboxes) {
  var arr = checkboxes.split(','); // разбиваем строку на массив
  shuffle(arr); // перемешиваем массив
  arr.forEach(function(id, index) { // перебираем получившийся массив
    setTimeout(function() { // задаем задержку
      $('#' + id).prop('checked', true); // отмечаем чекбокс
    }, index * 1000); // задержка равная индексу значения, умноженному на 1000 миллисекунд
(0*200, 1*200 и т.д.)
  });

}

function shuffle(a) { // функция перемешивания массива
  for (let i = a.length; i; i--) {
    let j = Math.floor(Math.random() * i);
    [a[i - 1], a[j]] = [a[j], a[i - 1]];
  }
}

check('html,sass,jquery');

 html 

 css

 javascript

 sass

 gulp

 css3

 jquery

 bootstrap





Функция перемешивания массива позаимствована из ответа на enSO.


Ответ 3

Ну вот как-то так получилось :



$(document).on('ready', function() {
  var cbs = $('#5, #6, #7, #8, #9, #10');
  var newCbs = [];

  for (var i = 0; i < cbs.length; i++) {
    newCbs.push({
      cb: cbs[i],
      num: Math.floor(Math.random() * 100) + 1
    });
  }

  newCbs = newCbs.sort(compare);
  xz(newCbs);
});

function compare(a, b) {
  if (a.num > b.num) return -1;
  if (a.num < b.num) return 1;
  return 0;
}

function xz(arr) {
  if (arr.length == 0) return;
  var current = arr[0].cb;
  arr.shift();
  setTimeout(function() {
      $(current).prop('checked', true);
      xz(arr);
    },
    Math.floor(Math.random() * 2000) + 1);
};
.that {
  height: 14px;
  width: 14px;
}