Блог

Главная - Вопросы по программированию - Заполнение нескольких значений флажков по классам

Заполнение нескольких значений флажков по классам

#javascript #jquery

Вопрос:

Как заполнить несколько значений флажков для одних и тех же элементов класса, извлеченных из базы данных с помощью ajax. Значения флажков разделяются запятыми вот так (apple, banana, orange) .

 $(document).ready(function(){
  var fruits = "banana,apple,orange";
  $(".check").val(fruits);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"fruits">
<input type="checkbox" class="check" value="apple">
  <label> Apple</label><br>
  <input type="checkbox" class="check" value="orange">
  <label> orange</label><br>
  <input type="checkbox" class="check" value="banana">
  <label> Banana</label><br>
  <input type="checkbox" class="check" value="mango">
  <label> Mango</label><br>
</div>

Ответ №1:

 $(document).ready(function(){
  var fruits = "banana,apple,orange";
  // Create an array with all the fruits
  var split = fruits.split(',');
  
  // Select each input by the value in this array
  split.forEach(f => {
    // Use the prop checked to check the boxes
    $('input[value="'   f   '"]').prop( "checked", true );
  })
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"fruits">
<input type="checkbox" class="check" value="apple">
  <label> Apple</label><br>
  <input type="checkbox" class="check" value="orange">
  <label> orange</label><br>
  <input type="checkbox" class="check" value="banana">
  <label> Banana</label><br>
  <input type="checkbox" class="check" value="mango">
  <label> Mango</label><br>
</div>

Ответ №2:

Вы можете использовать split и includes :

 $(document).ready(function () {
            var fruits = ("banana,apple,orange");
            var array = fruits.split(",");

            $('.check').each(function (i) {
                if (fruits.includes($(this).val()))
                   $(this).prop('checked', true);
            });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"fruits">
<input type="checkbox" class="check" value="apple">
  <label> Apple</label><br>
  <input type="checkbox" class="check" value="orange">
  <label> orange</label><br>
  <input type="checkbox" class="check" value="banana">
  <label> Banana</label><br>
  <input type="checkbox" class="check" value="mango">
  <label> Mango</label><br>
</div>

Комментарии:

1. Не ошибся. Однако это было бы медленнее, чем мое решение. Вы устанавливаете ВСЕ флажки, поэтому, если бы у вас было 1000, но только 2 флажка, это заняло бы гораздо больше времени, чем необходимо. Мое решение ищет только те флажки, которые необходимо проверить.

2. @Wimanicesir Я знаю это, но обратите внимание, что, вероятно, это может быть невозможно, если у вас есть 1000 флажок. Нет необходимости беспокоиться о сложности времени для постоянной величины! все они равны O(1)

Метки: