jQuery
확인란 다른 확인란을 모두 자동으로 선택 / 선택 취소

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript PHP Ruby on Rails twitter-bootstrap

소개

나는 여러 가지 Stackoverflow 예제와 답변을 사용하여 그룹 체크 박스 상태가 변경되면 자동 선택 / 선택 해제와 함께 "모두 선택"체크 상자를 관리하는 방법에 대한이 간단한 예제를 보았습니다. 제약 조건 : select all 그룹을 만들려면 "select all"id가 입력 이름과 일치해야합니다. 이 예에서 입력 선택 ID는 모두 cbGroup1입니다. 입력 이름은 cbGroup1입니다.

코드는 매우 짧습니다. if 문 (시간 및 리소스 소비)이 많지 않습니다.

2 해당 그룹 체크 박스가있는 모든 체크 박스를 선택하십시오

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p>
<input id="cbGroup1" type="checkbox">Select all
<input name="cbGroup1" type="checkbox" value="value1_1">Group1 value 1
<input name="cbGroup1" type="checkbox" value="value1_2">Group1 value 2
<input name="cbGroup1" type="checkbox" value="value1_3">Group1 value 3
</p>
<p>
<input id="cbGroup2" type="checkbox">Select all
<input name="cbGroup2" type="checkbox" value="value2_1">Group2 value 1
<input name="cbGroup2" type="checkbox" value="value2_2">Group2 value 2
<input name="cbGroup2" type="checkbox" value="value2_3">Group2 value 3
</p>

<script type="text/javascript" language="javascript">
    $("input").change(function() {
      $('input[name=\''+this.id+'\']').not(this).prop('checked', this.checked);
      $('#'+this.name).prop('checked', $('input[name=\''+this.name+'\']').length === $('input[name=\''+this.name+'\']').filter(':checked').length);      
    });
</script>

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow