[javascript] jQuery를 사용하여 모든 확인란을 확인하는 방법은 무엇입니까?

나는 jQuery에 대한 전문가는 아니지만 내 응용 프로그램에 대한 작은 스크립트를 만들려고 노력했습니다. 모든 확인란을 선택하고 싶지만 제대로 작동하지 않습니다.

처음에는 사용을 시도했고 attr그 후에 시도 prop했지만 뭔가 잘못되었습니다.

나는 이것을 먼저 시도했다.

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }
});

그러나 이것은 작동하지 않았습니다.

다음 : 위 코드보다 더 잘 작동했습니다.

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }
});

두 예 모두 작동하지 않습니다.

JSFiddle : http://jsfiddle.net/hhZfu/4/

답변

확인 된 속성을 설정 하려면 .prop () 를 사용해야 합니다.

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

데모 : Fiddle

답변

단순히 사용 checked의 특성 checkAll및 사용에 사용 ) 소품 ( Checked 속성 대신 ATTR의

라이브 데모

 $('#checkAll').click(function () {
     $('input:checkbox').prop('checked', this.checked);
 });

check와 같은 속성에 attr () 대신 prop () 사용

jQuery 1.6부터 .attr () 메서드는 설정되지 않은 속성에 대해 undefined를 반환합니다. 양식 요소의 확인, 선택 또는 비활성화 상태와 같은 DOM 속성을 검색하고 변경하려면 .prop () 메서드를 사용합니다.

체크 박스에 대해 동일한 ID가 있으며 고유 해야합니다 . 원하지 않는 확인란 이 포함되지 않도록 종속 확인란이있는 일부 클래스를 사용하는 것이 좋습니다 . 로이 $('input:checkbox')페이지의 모든 체크 박스를 선택합니다. 페이지가 새 확인란으로 확장되면 선택 / 선택 취소됩니다. 의도 한 동작이 아닐 수 있습니다.

라이브 데모

$('#checkAll').click(function () {
    $(':checkbox.checkItem').prop('checked', this.checked);
});

답변

완전한 솔루션이 여기 있습니다.

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

HTML은 다음과 같아야합니다.

선택된 세 개의 확인란에 단일 확인란이 선택 및 선택 취소됩니다.

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

이것이 나를 위해했던 것처럼 누군가에게 도움이되기를 바랍니다.

JS 바이올린 https://jsfiddle.net/52uny55w/

답변

사용자가 수동으로 모든 확인란을 선택하면 모든 확인란이 자동으로 선택되거나 사용자가 선택한 모든 확인란에서 그중 하나를 선택 취소하면 모두 자동으로 선택 취소되어야한다고 생각합니다. 여기 내 코드입니다 ..

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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

스 니펫 확장

답변

왜 이것을 시도해 보지 않겠습니까 ( ‘form #’이 html 양식의 적절한 선택자를 넣어야하는 두 번째 줄에서) :

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })
});

HTML은 다음과 같아야합니다.

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

도움이 되었기를 바랍니다.

답변

HTML :

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery :

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

데모 :
FIDDLE

답변

내가 아는 가장 간단한 방법 :

$('input[type="checkbox"]').prop("checked", true);