Установите флажок, действующий на двух разных выпадающих списках в форме

Question

У меня есть два меню в одной форме и флажок «Выбрать все». Однако нажатие одной кнопки влияет на два меню.

<div id="drop-wrapper"> 
    <input type="checkbox" name="select-all-cat" id="select-all-cat" /><label for="cities-label" class="categories-label">Select all</label><br> 

А вот второй один:

<div class="test-label"> 
    <input type="checkbox" name="select-all" id="select-all"><label class="categories-label">Select all</label><br> 

И JavaScript:

// Select all 
$('#select-all').click(function(event) { 
    if(this.checked) { 
     $(':checkbox').each(function() { 
      this.checked = true; 
      }); 
    } 
    else { 
     $(':checkbox').each(function() { 
      this.checked = false; 
      }); 
     } 
    }); 


// Select all categories 
$('#select-all-cat').click(function(event) { 
    if(this.checked) { 
     $(':checkbox').each(function() { 
      this.checked = true; 
      }); 
    } 
    else { 
     $(':checkbox').each(function() { 
      this.checked = false; 
      }); 
     } 
    }); 

Как я могу отделить два списка, которые находятся в той же форме?

Answer 1

Добавить контекст селекторов, соответствующих каждый флажок контейнер. Если предположить, что группа флажков вы хотите действовать на содержатся в той же DIV, как каждый выбрать все флажки:

$('#select-all').click(function(event) { 
    if(this.checked) { 
     $(':checkbox', '.test-label').prop('checked', true); 
... 
$('#select-all-cat').click(function(event) { 
    if(this.checked) { 
     $(':checkbox', '#drop-wrapper').prop('checked', true); 
... 

Answer 2

фильтр класса Добавить все ваши $ («: Флажок»)

// Select all 
    $('#select-all').click(function(event) { 
     if(this.checked) { 
      $('input:checkbox[class=select-all]').each(function() { 
       this.checked = true; 
       }); 
     } 
     else { 
      $('input:checkbox[class=select-all]').each(function() { 
       this.checked = false; 
       }); 
      } 
     }); 


// Select all categories 
$('#select-all-cat').click(function(event) { 
    if(this.checked) { 
     $('input:checkbox[class=select-all-cat]').each(function() { 
      this.checked = true; 
      }); 
    } 
    else { 
     $('input:checkbox[class=select-all-cat]').each(function() { 
      this.checked = false; 
      }); 
     } 
    });