3

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

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

Чекбоксы

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

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

3
  • 1
    "те которые я хочу" и "рандомным образом"? Это как?
    – Cheg
    7 сен 2017 в 16:40
  • 1
    Я хочу что бы загорелись допустим только html5 sass jquery я пишу $('#html,#sass,#jquery').prop('checked',true); но что бы не одновременно загорелись, а через допустим 200 миллисекунд, и в рандомном порядке. sass html jquery jquery sass html, при каждой загрузке страницы, рандомным образом загорались но только эти 3. Рандом не столь важно, сделать бы хотя бы что бы просто была задержка эта. 7 сен 2017 в 16:47
  • если ответ помог решить вашу проблемы, вы можете отметить его принятым, нажав на галочку рядом с ним
    – Cheg
    13 сен 2017 в 12:24

3 ответа 3

3

Для последовательного выбора чекбоксов используйте 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');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="html" /> html <br />
<input type="checkbox" id="css" /> css<br />
<input type="checkbox" id="javascript" /> javascript<br />
<input type="checkbox" id="sass" /> sass<br />
<input type="checkbox" id="gulp" /> gulp<br />
<input type="checkbox" id="css3" /> css3<br />
<input type="checkbox" id="jquery" /> jquery<br />
<input type="checkbox" id="bootstrap" /> bootstrap<br />

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

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

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<els.length; ++q) {
    setTimeout(function (el) { 
      $(el).prop('checked', true)
    }, DELAY * q, els[q]);
  }
});
label { display: inline-block; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type=checkbox id=a>a</label>
<label><input type=checkbox id=b>b</label>
<label><input type=checkbox id=c>c</label>
<label><input type=checkbox id=d>d</label>
<label><input type=checkbox id=e>e</label>
<label><input type=checkbox id=f>f</label>
<label><input type=checkbox id=g>g</label>
<label><input type=checkbox id=h>h</label>
<label><input type=checkbox id=i>i</label>
<label><input type=checkbox id=j>j</label>
<label><input type=checkbox id=k>k</label>
<label><input type=checkbox id=l>l</label>
<label><input type=checkbox id=m>m</label>
<label><input type=checkbox id=n>n</label>
<label><input type=checkbox id=o>o</label>
<label><input type=checkbox id=p>p</label>
<label><input type=checkbox id=q>q</label>
<label><input type=checkbox id=r>r</label>
<label><input type=checkbox id=s>s</label>
<label><input type=checkbox id=t>t</label>
<label><input type=checkbox id=u>u</label>
<label><input type=checkbox id=v>v</label>
<label><input type=checkbox id=w>w</label>
<label><input type=checkbox id=x>x</label>
<label><input type=checkbox id=y>y</label>
<label><input type=checkbox id=z>z</label>

0

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

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="1" class="that" />
<input type="checkbox" id="2" class="that" />
<input type="checkbox" id="3" class="that" />
<input type="checkbox" id="4" class="that" />
<input type="checkbox" id="5" class="that" />
<input type="checkbox" id="6" class="that" />
<input type="checkbox" id="7" class="that" />
<input type="checkbox" id="8" class="that" />
<input type="checkbox" id="9" class="that" />
<input type="checkbox" id="10" class="that" />
<input type="checkbox" id="11" class="that" />
<input type="checkbox" id="12" class="that" />
<input type="checkbox" id="13" class="that" />
<input type="checkbox" id="14" class="that" />
<input type="checkbox" id="15" class="that" />

2
  • А где же у вас выборка по определенным id?
    – Cheg
    7 сен 2017 в 17:38
  • про нее я забыл, но сделать выборку по ид не сильно сложно 7 сен 2017 в 17:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.