如何选择所有复选框

Question

我希望当我点击全选然后全部复选框将被选中，当我再次点击时，所有复选框将取消选择。

但是当我点击它时没有任何事情发生。

我的代码

jsfiddle link

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. Anchor没有checked属性 - 我在这里使用数据属性
2. 您必须拥有唯一ID或不使用它们 - 我在名称属性上使用“starts-with”而不是

census_df = census_df.loc[((census_df['REGION'] >= 1) & (census_df['REGION'] <=2))]
census_df = census_df[census_df['CTYNAME'].str.match('Washington')]
census_df = census_df[census_df['POPESTIMATE2015'] > census_df['POPESTIMATE2014']]
census_df = census_df[['STNAME', 'CTYNAME']]
census_df

$(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);
  });
});

1. 为什么不使用复选框来全选？

<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>

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

Answer 2

试试这个

＆＃13;

＆＃13;

$(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;
	});	
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;