Как сделать флажок «Выбрать все»

Question

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

но когда я нажимаю, ничего не происходит.

мой код

jsfiddle link

$(document).ready(function() {
  $("#check-all").click(function() {
    var check = $(this).attr('checked');
    if (check == "checked") {
      $("#deleteid").attr('checked', 'checked');
    } else
      $("#deleteid").removeAttr('checked');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sort_select_delete_form" method="get">

  <div class="btn-group">
    <a href="#check-all" class="btn btn-primary" id="check-all">Select All</a>
    <input type="submit" class="btn btn-danger" value="Delete Selected">
  </div>

  <input class="form-check-input" type="checkbox" value="1000000001" id="deleteid[]" name="deleteid[]">select1
  <input class="form-check-input" type="checkbox" value="1000000002" id="deleteid[]" name="deleteid[]">select2
  <input class="form-check-input" type="checkbox" value="1000000003" id="deleteid[]" name="deleteid[]">select3
  <input class="form-check-input" type="checkbox" value="1000000004" id="deleteid[]" name="deleteid[]">select4
  <input class="form-check-input" type="checkbox" value="1000000005" id="deleteid[]" name="deleteid[]">select5

</form>

Answer 1

попробуйте

$(function(){	
	$('#check-all').click(function(){
		if($(this).hasClass('checked')){
			$(this).removeClass('checked').text('Select All');
			$('.form-check-input').prop('checked', false);
		}else{
			$(this).addClass('checked').text('Unselect All');
			$('.form-check-input').prop('checked', true);
		}
		return false;
	});	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="sort_select_delete_form" method="get">

  <div class="btn-group">
	<a href="#check-all" class="btn btn-primary" id="check-all">Select All</a>
  </div>

  <input class="form-check-input" type="checkbox" value="1000000001" id="deleteid1" name="deleteid[]">select1
  <input class="form-check-input" type="checkbox" value="1000000002" id="deleteid2" name="deleteid[]">select2
  <input class="form-check-input" type="checkbox" value="1000000003" id="deleteid3" name="deleteid[]">select3
  <input class="form-check-input" type="checkbox" value="1000000004" id="deleteid4" name="deleteid[]">select4
  <input class="form-check-input" type="checkbox" value="1000000005" id="deleteid5" name="deleteid[]">select5

</form>

Answer 2

1. Якоря не имеют проверенного атрибута - здесь я использую атрибут данных
2. Вы должны иметь уникальные идентификаторы или не использовать их - вместо атрибута name я использую «начальный-с»

$(document).ready(function() {
  $("#check-all").on("click",function(e) {
    e.preventDefault(); // cancel link
    var check = $(this).data("checked")==true;
    $(this).data("checked",!check);
    $("[name^='deleteid']").prop('checked', !check);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sort_select_delete_form" method="get">

  <div class="btn-group">
    <a href="#check-all" class="btn btn-primary" id="check-all">Select All</a>
    <input type="submit" class="btn btn-danger" value="Delete Selected">
  </div>

  <input class="form-check-input" type="checkbox" value="1000000001" name="deleteid[]">select1
  <input class="form-check-input" type="checkbox" value="1000000002" name="deleteid[]">select2
  <input class="form-check-input" type="checkbox" value="1000000003" name="deleteid[]">select3
  <input class="form-check-input" type="checkbox" value="1000000004" name="deleteid[]">select4
  <input class="form-check-input" type="checkbox" value="1000000005" name="deleteid[]">select5

</form>

3. Почему бы не использовать флажок для выбора всех?

$(document).ready(function() {
  $("#check-all").on("click",function(e) {
    $("[name^='deleteid']").prop('checked', this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sort_select_delete_form" method="get">

  <div class="btn-group">
    <label for="check-all"><input type="checkbox" class="btn btn-primary" id="check-all">Select All</label>
    <input type="submit" class="btn btn-danger" value="Delete Selected">
  </div>

  <input class="form-check-input" type="checkbox" value="1000000001" name="deleteid[]">select1
  <input class="form-check-input" type="checkbox" value="1000000002" name="deleteid[]">select2
  <input class="form-check-input" type="checkbox" value="1000000003" name="deleteid[]">select3
  <input class="form-check-input" type="checkbox" value="1000000004" name="deleteid[]">select4
  <input class="form-check-input" type="checkbox" value="1000000005" name="deleteid[]">select5

</form>