programing

jQuery로 모든 체크박스를 선택하는 방법은?

starjava 2023. 10. 29. 18:57
반응형

jQuery로 모든 체크박스를 선택하는 방법은?

저는 jQuery selectors에 대한 도움이 필요합니다.다음과 같이 마크업이 있다고 가정해 보겠습니다.

<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

다음을 제외한 모든 확인란을 가져오는 방법#select_all사용자가 클릭할 때?

사용자의 경우에 효과가 있어야 할 보다 완벽한 예:

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

언제.#select_all확인란을 클릭하면 확인란의 상태가 선택되고 현재 양식의 모든 확인란이 동일한 상태로 설정됩니다.

주의할 점은 당신이 제외시킬 필요가 없다는 것은#select_all선택 항목의 확인란은 다른 항목과 동일한 상태를 갖습니다.만약 어떤 이유로 당신이 제외할 필요가 있다면,#select_all, 다음을 사용할 수 있습니다.

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

간편하고 깨끗한 상태:

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked', c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

ttr() 메서드 때문에 Jquery 1.9+에서 top answer가 작동하지 않습니다.대신 prop() 사용:

$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});

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

아니면 당신은 사용할 수 있습니다.

: 확인란 선택기

$("form input:checkbox").attr( "checked" , true );

HTML을 다시 작성하고 메인 확인란에 클릭 핸들러를 제공했습니다.

$(function(){
    $("#select_all").click( function() {
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>

 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });

 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });

jQuery(document).ready(function () {
        jQuery('.select-all').on('change', function () {
            if (jQuery(this).is(':checked')) {
                jQuery('input.class-name').each(function () {
                    this.checked = true;
                });
            } else {
                jQuery('input.class-name').each(function () {
                    this.checked = false;
                });
            }
        });
    });

이 코드는 잘 작동합니다.

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

class checkbox_class를 모든 체크박스에 추가하기만 하면 됩니다.

쉽고 간단하게 :D

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

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

});

문제가 발생하면 위의 답변 중 어느 것도 효과가 없습니다.그 이유는 jQuery Uniform 플러그인(테마메트로닉과 연동)에 있었습니다.답이 유용했으면 좋겠습니다 :)

jQuery Uniform 작업

$('#select-all').change(function() {
    var $this = $(this);
    var $checkboxes = $this.closest('form')
        .find(':checkbox');

    $checkboxes.prop('checked', $this.is(':checked'))
        .not($this)
        .change();
});

그들 모두를 지배하는 하나의 확인란

경량이고 Uniform에 대해 즉시 지원되는 체크박스를 통해 체크박스를 제어할 플러그인을 여전히 찾고 있는 사람들을 위해JS와 iCheck는 제어된 확인란 중 하나 이상이 선택 해제되면 선택 해제됩니다(물론 제어된 모든 확인란이 선택되면 선택 해제됩니다). jQuery checkAll 플러그인을 만들었습니다.

설명서 페이지의 예시를 자유롭게 확인하세요.

이 질문 예제에서는 다음 작업만 수행하면 됩니다.

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

분명하고 간단하지 않습니까?

$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });

저는 이제 이런 스타일에 치우쳤어요.

양식 이름을 지정하고 select_all 상자에 'onClick'을 추가했습니다.

저는 또한 누군가 클릭할 때 인터넷이 폭발하지 않도록 jquery selector에서 'select_all' 확인란을 제외했습니다.

 function toggleSelect(formname) {
   // select the form with the name 'formname', 
   // then all the checkboxes named 'select[]'
   // then 'click' them
   $('form[name='+formname+'] :checkbox[name="select[]"]').click()
 }

 <form name="myform">
   <tr>
        <td><input type="checkbox" id="select_all"    
                   onClick="toggleSelect('myform')" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
</table>

토글로 사용할 체크박스/요소를 제외한 페이지의 모든 체크박스를 선택하는 기본 jQuery 플러그인은 다음과 같습니다.

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

그런 다음 체크박스나 버튼 요소에 있는 기능을 호출하기만 하면 됩니다.

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

언급URL : https://stackoverflow.com/questions/2228382/how-to-select-all-checkboxes-with-jquery

반응형

'programing' 카테고리의 다른 글

EPLus를 사용하여 .xls 파일을 읽으려고 할 때 오류가 발생했습니다.  (0) 2023.10.29
CSS에서 한 입력 자리 표시자에 두 가지 다른 글꼴 크기를 가질 수 있습니까?  (0) 2023.10.29
jQuery가 ID에 .(주기)가 있는 요소를 선택하도록 하려면 어떻게 해야 합니까?  (0) 2023.10.29
C#와 유사한 자바스크립트의 포맷 번호  (0) 2023.10.29
대괄호 자바스크립트 객체 키  (0) 2023.10.29

'programing'의 다른글

  • 현재글jQuery로 모든 체크박스를 선택하는 방법은?

관련글

댓글

티스토리툴바