Предотвращение распространения обработчика события при вызове this.checked в другой функции

Question

У меня есть флажок «Выбрать все», и я пытаюсь синхронизировать его с некоторыми другими флажками на странице. Если все остальные флажки отменены, я хочу снять флажок «Выбрать все».

Проблема заключается в том, что если вы нажмете один из двух флажков, поведение будет не таким, как предполагалось. Я считаю, что это происходит потому, что когда я вызываю this.checked в обработчике событий «select all», он распространяется на другой обработчик событий. Есть ли способ остановить это?

JFiddle: https://jsfiddle.net/te5cefxe/1/

<label class="checkbox"><input id="selectall" type="checkbox" checked> 
<span>Deselect All</span></label> 
<br> 
<label class="checkbox device"><input type="checkbox" name="number" value="1" checked>Choice 1</label> 
<br> 
<label class="checkbox device"><input type="checkbox" name="number" value="2" checked>Choice 2</label> 


$(function(){ 
    $("#selectall").on('click', function(e) { 
     var sa = this; 
     $(sa).next().text(sa.checked ? 'Deselect All' : 'Select All'); 

     $("input[type=checkbox]").each(function(){ 
      if (this != sa) { 
     // prevent the click event from propagating to the function below 
       this.checked = sa.checked; 
      } 
     }); 
    }); 

    $("input[type=checkbox]").on('click', function(e) { 
     var ck = this; 
     var sa = $("#selectall")[0]; 

     if (this != sa) { 
      var dif = false; 
      $("input[type=checkbox]").each(function(){ 
       if (this != sa && (dif = !(this.checked == ck.checked))) {; 
        return false; // break out 
       } 
      }); 

      if (!dif) { 
       console.log('same'); 
       sa.click(); 
      } 
     } 
    }); 
}); 

Answer 1

Working fiddle.

Использование e.stopPropagation() Внутри each Метод.

Описание: Предотвращает событие от бурлит дерева DOM, предотвращая любые родительские обработчики из уведомления о событии

$("input[type=checkbox]").each(function(e){ 
    e.stopPropagation(); 

    if (this != sa && (dif = !(this.checked == ck.checked))) {; 
     return false; // break out 
    } 
}); 

Надежда это помогает.

Answer 2

ОБНОВЛЕНО

e.stopPropagation() используется для предотвращения события от барботирования до DOM дерева (по отношению к родителям), где е является обработчик события и stopPropagation() это функция javascript.

Но в вашем случае вам не нужно, что есть проблема в вашем code

Проверьте Working Fiddle

ИлиSnippet его работы.

$(function() { 
 
    $("#selectall").on('change', function(e) { 
 
     $('input:checkbox').prop('checked', this.checked); 
 
     $("#selectall + span").text("Deselect All"); 
 
    }); 
 

 
    $("input[type=checkbox]").on('change', function(e) { 
 
     var length = $("input[type='checkbox']:checked").not("#selectall").length; 
 
     if(length==0){ 
 
      $("#selectall").prop("checked",false); 
 
      $("#selectall + span").text("Select All"); 
 
     } else if(length == 2){ 
 
      $("#selectall").prop("checked",true); 
 
      $("#selectall + span").text("Deselect All"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label class="checkbox"> 
 
    <input id="selectall" type="checkbox" checked /><span>Deselect All</span></label> 
 
<br> 
 
<label class="checkbox device"> 
 
    <input type="checkbox" name="number" value="1" checked>Choice 1</label> 
 
<br> 
 
<label class="checkbox device"> 
 
    <input type="checkbox" name="number" value="2" checked>Choice 2</label>