Регистрация значения флажков в консоли

Question

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

$(document).ready(function(){
    console.log("loaded");
});

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
  $filterCheckboxes.filter(":checked").each(function() {
    console.log(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="">
  <div class="checkbox-group">
    <input type="checkbox" name="name_1" value="value1" id="id_1">
    <label for="name_1">
      <span class="check"></span>
      <span class="box"></span>
      Name 1
    </label>
  </div>
</li>

Answer 1

На самом деле вам не нужно использовать функцию filter(), попробуйте следующее:

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function(){
        console.log($(this).val());
});

Функция val() получает текущее проверенное значение набора флажков. И вы могли бы хотеть указать набор флажков, которые вы хотите регистрировать, используя атрибут name, например:

name="common_boxes"

И это также хорошая практика не смешивать некоторые компоненты Javascript и jQuery вместе, как и element.value, следует заменить на element.val(), так же как и приведенный выше фрагмент. И еще раз подчеркиваю, это хорошая практика, но вы можете использовать ее по своему усмотрению

Answer 2

let fieldnamelist = [];
        $(".fieldnames").click(function()
        {
          	let fieldnamecheck = $(this).is(":checked");
          	let fieldnames = $(this).val();
          	if(fieldnamecheck==true)
          	{
              	fieldnamelist.push(fieldnames);
              	console.log(fieldnamelist);
          	}
          	else
          	{
              	for(var i =0;i<3;i++)
              	{
                  	if(fieldnamelist[i]==fieldnames)
                  	{
                      	fieldnamelist.splice(i, 1);
                      	console.log(fieldnamelist);
                  	}
              	}
          	}
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="fieldnames" value="One"> One
        
                <input type="checkbox" class="fieldnames" value="Two"> Two