проверка ввода / снятие отметки все по jquery

Question

Я написал этот код ниже, но не нахожу ошибку. Когда я нажимаю «Проверить / снять все галочки», я хочу увеличить / уменьшить счетчик результата p. спасибо

$("#checkAll").change(function() {
  var status = $(this).is(":checked") ? true : false;
  $(".chk2").prop("checked", status);
});


showChecked();

function showChecked() {
  document.getElementById("result").textContent = document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[name=chk]").forEach(i => {
  i.onclick = function() {
    showChecked();
  }
});

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" name="chk" class="chk" value="option1" /> Option 1
<input type="checkbox" name="chk" class="chk" value="option2" /> Option 2
<input type="checkbox" name="chk" class="chk" value="option3" /> Option 3

<p id="result"></p>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 1

Код ниже будет работать, если пользователь установит все флажки, затем отметит флажок «все», а если пользователь отменит выбор одного флажка, флажок «все» будет снят.

$("#checkall").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
    showChecked();
});
$(".cb-element").change(function () {
  if($(".cb-element").length==$(".cb-element:checked").length){
        $("#checkall").prop('checked', true);
        showChecked();
    }
  else{
        $("#checkall").prop('checked', false);
        showChecked();
    }
});
function showChecked(){
    $("#result").html($(".cb-element:checked").length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>

<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3
<p id="result"></p>

Answer 2

Вы можете решить вашу проблему, используя приведенный ниже код, где вы можете создать одну функцию, чтобы получить количество отмеченных флажков, скажем, showChecked. Прикрепите обработчик событий щелчка для checkAll и для chk флажков.

CheckAll Обработчик событий можно использовать для проверки / снятия флажков всех chk флажков согласно текущему значению checkAll и вызова функции showChecked чтобы рассчитывать. В chk обработчике кликов вы можете вызвать функцию, чтобы получить счетчик, а также поставить или снять галочку checkAll в соответствии с общим счетчиком проверенного состояния chk флажки

$(function(){
$("#checkAll").on('click', function(){
		$(".chk").prop("checked", $(this).is(":checked"));
    showChecked();
});

$(".chk").on('change', function(){
    if($(".chk").length != $('.chk:checked').length){
       $("#checkAll").prop('checked', false);
    }
    showChecked();
});
});

function showChecked(){
	$("#result").html($('.chk:checked').length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" name="chk" class="chk" value="option1" /> Option 1
<input type="checkbox" name="chk" class="chk" value="option2" /> Option 2
<input type="checkbox" name="chk" class="chk" value="option3" /> Option 3


<p id="result"></p>