Добавить список в переменную при выборе чекбоксов

Question

Вот HTML

$(".checkbox_3 input").on( "change", function() {
  templ = "";
  parent = $(this).closest(".checkboxes_wrapp");
  parent.find(".checkbox_3").each(function() {
    input = $(this).find("input");
    if(input.prop("checked") == true) {
      templ += input.val() +" ";
    }
    console.log(templ);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="checkboxes_wrapp">
  <div>
    <label class="checkbox_3">
      <input value="All Countries" type="checkbox" />
      <span>All Countries</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Afganistan" type="checkbox" />
      <span>Afganistan</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Algeria</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Angola</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Argentina</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Armenia</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Bahrain</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Barbados</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Country</span>
    </label>
  </div>
</div>

Нужно чтобы при клике на чекбокс в переменную templ записывалось значения всех выбранных чекбоксов в порядке котором выбиралось. Каждое слово через пробел или запятую. Как это сделать?

Answer 1

Заведите массив, где будете хранить результат. При клике на элемент добавляйте его в массив, или удаляйте. Так сохраните порядок выбора.

let result = [];
$(".checkbox_3 input").on("change", function() {
    let value = $(this).val();
    if ($(this).is(':checked')) {
        result.push(value);
    } 
    else {
        let idx = result.indexOf(value);
        result.splice(idx, 1);
    }  
    console.log(result.join(', '));  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="checkboxes_wrapp">
  <div>
    <label class="checkbox_3">
      <input value="All Countries" type="checkbox" />
      <span>All Countries</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Afganistan" type="checkbox" />
      <span>Afganistan</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Algeria</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Angola" type="checkbox" />
      <span>Angola</span>
    </label>
  </div>
  <div>
    <label class="checkbox_3">
      <input value="Algeria" type="checkbox" />
      <span>Argentina</span>
    </label>
  </div>


</div>

БЛОГ НА HUSL

Добавить список в переменную при выборе чекбоксов

Ответы (1 шт):