Я хочу предупреждать, когда установлен флажок, но этот код не работает

Question

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

$(document).ready(function(){
    $("#location").click(function(){
        $("input[name='location']:checked").each(function(){
            alert("go");
        });
    });
});

laravel код флажка лезвия

<div class="sidebar-box">
    <h5>Location</h5>
    <ul class="checkbox-list">
    @foreach($store_location as $store_location)
        <li class="checkbox">
            <label>
                <input type="checkbox" class="i-check" id="location" name="location">
                {{ $store_location->store_location_name }}
            </label>
        </li>
    @endforeach
    </ul>
</div>

Answer 1

Сначала вы должны ответить, если @foreach l oop работает нормально и правильно отображает список ul > li. Я думаю, это работает.

Код JS

Я переписал ваш код, и он работает, даже если в вашем коде есть проблема. Вам действительно стоит использовать неидентичные атрибуты id. Вы можете использовать классы или что-либо еще несколько раз в разных тегах HTML, но не в атрибуте id. Но это не вызывает проблемы. Взгляните на пример:

Пример (просто JavaScript)

document.querySelectorAll('#location').forEach(locationEl => {
  locationEl.addEventListener('click', () => {
    document.querySelectorAll('input[name=location]:checked').forEach(el => {
      console.log('go');
    });
  });
});


/* 

  "Equivalent" to your jQuery Code:

  $(document).ready(function(){
        $("#location").click(function(){
           $("input[name='location']:checked").each(function(){
           alert("go");
       });
    });
  });

*/

<ul>
  <li>
    <input type="checkbox" name="location" id="location">
  </li>
  <li>
    <input type="checkbox" name="location" id="location">
  </li>
  <li>
    <input type="checkbox" name="location" id="location">
  </li>
  <li>
    <input type="checkbox" name="location" id="location">
  </li>
</ul>

Лучше:

document.querySelectorAll('input[name=location]').forEach(locationEl => {
  locationEl.addEventListener('click', () => {
    document.querySelectorAll('input[name=location]:checked').forEach(el => {
      console.log(el.value, 'is checked');
    });
  });
});

<ul>
  <li>
    <input type="checkbox" name="location" value="1">
  </li>
  <li>
    <input type="checkbox" name="location" value="2">
  </li>
  <li>
    <input type="checkbox" name="location" value="3">
  </li>
  <li>
    <input type="checkbox" name="location" value="4">
  </li>
</ul>

Используя input[name=location] в качестве селектора, вы обращаетесь к любому тегу input с атрибутом name со значением location. И это должно работать.

Код шаблона Blade

Вы, скорее всего, случайно используете одно и то же имя переменной для переменной, которая должна быть повторена, и элемента вывода каждого l oop . Вы должны попытаться переименовать их в зависимости от имени переменной, которая содержит массив желаемой информации:

<div class="sidebar-box">
    <h5>Location</h5>
    <ul class="checkbox-list">
    @foreach($store_location as $location)
        <li class="checkbox">
            <label>
                <input type="checkbox" class="i-check" name="location">
                {{ $location->store_location_name }}
            </label>
        </li>
    @endforeach
    </ul>
</div>

Если это не сработает, подумайте о загрузке некоторой части вашего обработанного HTML кода. . Вы загрузили код лезвия, верно? Или попробуйте отладить свои переменные, которые вы подталкиваете к своему шаблону лезвия. Удачи!