2017-02-02 1 views
0

У меня есть следующая ситуация, которую я не могу решить. Я был бы очень благодарен, если бы у кого-нибудь была идея:Javascript Bootstrap randomize checkbox

На моей веб-странице есть таблица игроков. Каждая строка (игрок) содержит два флажка: один, который выбирает, активен ли игрок (отмечен) или нет, другой, к какой команде он принадлежит (отмечен = команда 1; unchecked = Team 2).

Таким образом, каждая строка выглядит н так:

<tr> 
    <td><input id="plyr2_active" type="checkbox" name="plyr_active[]" value="2"></td> 
    <td><input type="checkbox" id="plyr2_team" name="plyr_team[2]" data-on-color="danger" data-off-color="success" data-on-text="RED" data-off-text="GREEN" checked value="1"></td> 
</tr> 

Я хотел бы добавить кнопку, при нажатии, будет работать функция, которая Рандомизация команды из активных игроков. Это означает, что игроки будут перетасованы, а половина из них принадлежит одной, а другая половина - другой команде.

Что я пытался: получить все состояния флажка в массиве, а затем перетасовать() массив и попытаться изменить состояние проверки через bootstrap. Несчастно не удалось :-(

Любая помощь будет высоко ценится. Спасибо !!

+0

Можете уточнить, где у вас возникают проблемы? Это с собиранием состояний в массив, перетасовкой массива или изменением таблицы для отражения пересмотренного массива? – rasmeister

+0

Ну, прежде всего, как получить только числа активных игроков в массив. Если у меня есть этот массив, я бы использовал shuffle (array), а затем попытался прочитать первую половину записей в этом массиве и изменить соответствующие флажки. – DatabaseMan

ответ

0

Хорошо, это должно помочь вам начать работу. Он показывает, как вывести список активных игроков (с помощью JQuery) из таблицы .

Если у вас есть кнопка с идентификатором 'shuffleBtn':

<button id="shuffleBtn">Shuffle<button> 

и таблицы с идентификатором 'игроков':

<table id='players'> 
    : 
</table> 

-

$("#shuffleBtn").click(function() { 
    var newPlayerArray = [], 
     id = 1; 
    $("#players tr td:first-child").each(function() { 
     if ($(this).find('input:first').prop('checked')) { 
      newPlayerArray.push(id); 
     } 
     id++; 
    }); 
    console.log(newPlayerArray); 
}); 

Это будет отображать множество активных игроков (при условии, первый ряд является игрок 1, второй игрок 2, и т.д.) на консоли.

Пример: [1,3,4]

Затем она перебирает каждую строку() и захватывает первый столбец(). Затем для каждого из них он находит первый <input> и проверяет наличие свойства «checked» (это означает, что был установлен флажок).

Я просто нажимаю индекс строки (начиная с 1), поэтому вам может потребоваться изменить способ интерпретации связанного с ним игрока.