developer tip

jQuery로 모든 확인란을 선택하십시오.

copycodes 2020. 11. 6. 18:54
반응형

jQuery로 모든 확인란을 선택하십시오.


jQuery 선택기에 대한 도움이 필요합니다. 아래와 같이 마크 업이 있다고 가정합니다.

<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'));
});

#select_all체크 박스를 클릭, 체크 박스의 상태를 체크하고 현재 양식에있는 모든 체크 박스는 동일한 상태로 설정되어 있습니다.

#select_all다른 모든 항목과 동일한 상태를 가지므로 선택 항목 에서 확인란 을 제외 할 필요가 없습니다 . 어떤 이유로를 제외해야하는 경우 다음을 #select_all사용할 수 있습니다.

var checkboxes = $(this).closest('form').find(':checkbox').not($(this));

간단하고 깨끗한

$('#select_all').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});

attr () 메서드 때문에 Jquery 1.9 이상에서는 최상위 답변이 작동하지 않습니다. 대신 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 );

또는 사용할 수 있습니다

: checkbox 선택기

$("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>

모든 체크 박스에 체크 박스 _ 클래스 클래스를 추가 하기 만하면됩니다.

쉽고 간단하게 : D


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

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

});  

문제가 발생하면 위의 답변 중 어느 것도 작동하지 않습니다. 그 이유는 jQuery Uniform 플러그인 ( 테마 메트로 닉 작업 )에 있었기 때문에 답변이 도움이되기를 바랍니다. :)

과 협력하여 jQuery를 통일

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

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

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

경량이고 UniformJS 및 iCheck에 대한 기본 지원 기능이 있으며 제어 된 확인란 중 하나 이상이 선택 취소되면 선택 취소됩니다 (모든 제어 된 확인란이 선택되면 선택 취소됨). 물론) jQuery checkAll 플러그인을 만들었습니다 .

Feel free to check the examples on documentation page.


For this question example all you need to do is:

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

Isn't that clear and simple?


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

I'm now partial to this style.

I've named your form, and added an 'onClick' to your select_all box.

I've also excluded the 'select_all' checkbox from the jquery selector to keep the internet from blowing up when someone clicks it.

 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>


Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:

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

Then simply call the function on your checkbox or button element:

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

참고URL : https://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery

반응형