Блог

Главная - Вопросы по программированию - Изменение jQuery / JavaScript в флажке

Изменение jQuery / JavaScript в флажке

#javascript #html #jquery #ajax #checkbox

#javascript #HTML #jquery #ajax #флажок

Вопрос:

У меня есть простой div с несколькими флажками. Я хочу искать любые изменения в флажке, чтобы выполнить ajax-запрос. Этот код не может видеть изменения в этих флажках. Как правильно это сделать?

 $(document).on('change', '#listfilters checkbox', function(e) {
        if(this.checked) {
            alert("changed");
          // checkbox is checked
        }
  }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <input type="checkbox" id="showall" name="showall" value=0>amp;nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>amp;nbsp;
    <label for="showfl">Filtered</label>
    </p>
</div>

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

1. измените свой селектор на $(document).on('change', '#listfilters input[type=checkbox]', function(e) {

Ответ №1:

Вам нужно указать флажок в части селектора. Измените его на #listfilters [type=checkbox] 

 $(document).on('change', '#listfilters [type=checkbox]', function(e) {
        if(this.checked) {
            alert("changed");
          // checkbox is checked
        }
  }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <input type="checkbox" id="showall" name="showall" value=0>amp;nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>amp;nbsp;
    <label for="showfl">Filtered</label>
    </p>
</div>

Ответ №2:

Вместо document этого вы можете выбрать непосредственно свой div для быстрого / более быстрого выбора.

 $("#listfilters").on('change', 'input[type=checkbox]', function(e) {
        if(this.checked) {
            alert($(this).val());             
        }
  }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="listfilters">
    <p>
    <label for="showall"><input type="checkbox" id="showall" name="showall" value="showall">amp;nbsp;
    Show All</label>
    </p>
    <p>
    <label for="showfl"><input type="checkbox" id="showfl" name="showfl" value="Filtered">amp;nbsp;
    Filtered</label>
    </p>
</div>