programing

jQuery를 사용하여 버튼으로 모든 확인란을 선택/선택 취소하려면 어떻게 해야 합니까?

bestprogram 2023. 9. 4. 20:28

jQuery를 사용하여 버튼으로 모든 확인란을 선택/선택 취소하려면 어떻게 해야 합니까?

jQuery를 사용하여 모든 확인란을 선택/해제하려고 합니다.이제 상위 확인란을 선택/선택 해제하면 모든 하위 확인란이 선택/선택 해제되고 상위 확인란 텍스트도 모두 선택/선택 해제됩니다.

이제 부모 확인란을 입력 단추로 바꾸고, 단추의 텍스트도 모두 선택/선택 취소로 변경합니다.코드가 있습니다, 코드를 수정해주실 수 있는 분 있나요?

    $( function() {
        $( '.checkAll' ).live( 'change', function() {
            $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
            $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
        });
        $( '.cb-element' ).live( 'change', function() {
            $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );

        });
    });


   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

사용해 보십시오.

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

데모

이것이 제가 찾은 가장 짧은 방법입니다(jQuery1.6+ 필요).

HTML:

<input type="checkbox" id="checkAll"/>

JS:

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

.propas .attr을 사용하고 있습니다. 입력 태그에 선택한 속성을 명시적으로 추가하지 않으면 jQuery 1.6+의 확인란에 대해 작동하지 않습니다.

예-

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

이것을 사용해 보십시오.

HTML

<input type="checkbox" name="all" id="checkall" />

자바스크립트

$('#checkall:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});​

데모

HTML

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

자바스크립트

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});

jQuery를 사용하여 중간 속성이 있는 모두 선택/선택 취소

getSelected를 사용하여 어레이에서 선택한 항목 가져오기Items() 메서드

원본 확인란 목록 선택/모두 선택 취소(마스터 확인 확인 포함)

enter image description here

HTML

<div class="container">
  <div class="card">
    <div class="card-header">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="selectAll"
            id="masterCheck"
          />
          <label class="form-check-label" for="masterCheck">
            Select / Unselect All
          </label>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush" id="list-wrapper">
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item1"
            id="item1"
          />
          <label class="form-check-label" for="item1">
            Item 1
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item2"
            id="item2"
          />
          <label class="form-check-label" for="item2">
            Item 2
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item3"
            id="item3"
          />
          <label class="form-check-label" for="item3">
            Item 3
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item4"
            id="item4"
          />
          <label class="form-check-label" for="item4">
            Item 4
          </label>
        </li>
        <li class="list-group-item">
          <input
            class="form-check-input"
            type="checkbox"
            value="item5"
            id="item5"
          />
          <label class="form-check-label" for="item5">
            Item 5
          </label>
        </li>
        <li class="list-group-item" id="selected-values"></li>
      </ul>
    </div>
  </div>
</div>

jQuery

  $(function() {
    // ID selector on Master Checkbox
    var masterCheck = $("#masterCheck");
    // ID selector on Items Container
    var listCheckItems = $("#list-wrapper :checkbox");

    // Click Event on Master Check
    masterCheck.on("click", function() {
      var isMasterChecked = $(this).is(":checked");
      listCheckItems.prop("checked", isMasterChecked);
      getSelectedItems();
    });

    // Change Event on each item checkbox
    listCheckItems.on("change", function() {
      // Total Checkboxes in list
      var totalItems = listCheckItems.length;
      // Total Checked Checkboxes in list
      var checkedItems = listCheckItems.filter(":checked").length;

      //If all are checked
      if (totalItems == checkedItems) {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", true);
      }
      // Not all but only some are checked
      else if (checkedItems > 0 && checkedItems < totalItems) {
        masterCheck.prop("indeterminate", true);
      }
      //If none is checked
      else {
        masterCheck.prop("indeterminate", false);
        masterCheck.prop("checked", false);
      }
      getSelectedItems();
    });

    function getSelectedItems() {
      var getCheckedValues = [];
      getCheckedValues = [];
      listCheckItems.filter(":checked").each(function() {
        getCheckedValues.push($(this).val());
      });
      $("#selected-values").html(JSON.stringify(getCheckedValues));
    }
  });

tooogle-event를 더 이상 사용할 수 없는 jQuery 1.9+와 호환되는 버튼을 사용하여 확인란을 전환하는 솔루션:

$('.check:button').click(function(){
      var checked = !$(this).data('checked');
      $('input:checkbox').prop('checked', checked);
      $(this).val(checked ? 'uncheck all' : 'check all' )
      $(this).data('checked', checked);
});

데모

사용해 보십시오.

$('.checkAll').on('click', function(e) {
     $('.cb-element').prop('checked', $(e.target).prop('checked'));
});

e할 때 생성되는 이벤트입니다.click,그리고.e.target클릭한 요소입니다(.checkAll), 그래서 당신은 속성만 넣으면 됩니다.checked계급이 있는 요소의..cb-element클래스가 .checkAll'인 요소의 경우와 같습니다.

PS: 제가 영어를 잘못해서 죄송합니다!

아래 코드는 사용자가 모든 확인란을 선택한 후 전체 확인란을 선택하면 작동하고 사용자가 하나의 확인란을 선택 취소하면 전체 확인란이 선택 해제됩니다.

$("#checkall").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$(".cb-element").change(function () {
  if($(".cb-element").length==$(".cb-element:checked").length)
    $("#checkall").prop('checked', true);
  else
    $("#checkall").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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

Richard Garside의 짧은 대답에 동의하지만, 대신에prop()에$(this).prop("checked")네이티브 JS를 사용할 수 있습니다.checked확인란 속성(예:

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

해보세요.

    $('.checkAll').on('click',function(){
        $('.checkboxes').prop('checked',$(this).prop("checked"));
    });`

학급.checkAll대량 작업을 제어하는 확인란입니다.

 $(document).on('change', '.check-all', function () {
   if($(this).prop('checked')) {
      $('.check-box').prop('checked', true)
   }else {
      $('.check-box').prop('checked', false);
   }

페이지의 모든 확인란을 선택 취소하려면 가장 쉬운 방법은 다음과 같습니다.

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

최고의 솔루션 체크 피들

$("#checkAll").change(function () {
    $("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
        _tot = $(".cb-element").length                        
        _tot_checked = $(".cb-element:checked").length;

        if(_tot != _tot_checked){
            $("#checkAll").prop('checked',false);
        }
});

<input type="checkbox" id="checkAll"/> ALL

<br />

<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3

이것을 먹어보세요.

$(".checkAll").click(function() {
    if("checkall" === $(this).val()) {
         $(".cb-element").attr('checked', true);
         $(this).val("uncheckall"); //change button text
    }
    else if("uncheckall" === $(this).val()) {
         $(".cb-element").attr('checked', false);
         $(this).val("checkall"); //change button text
    }
});

뻔뻔한 자기 홍보: 그것을 위한 jQuery 플러그인이 있습니다.

HTML:

<form action="#" id="myform">
    <div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
    <fieldset id="slaves">
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
    </fieldset>
</form>​

JS:

$('#checkall').checkAll('#slaves input:checkbox', {
    reportTo: function () {
        var prefix = this.prop('checked') ? 'un' : '';
        this.next().text(prefix + 'check all');
    }
});​

...그리고 당신은 끝났습니다.

http://jsfiddle.net/mattball/NrM2P

이것을 시도해 보세요.

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">

사용할 수 있습니다.this.checked확인란의 현재 상태를 확인합니다.

$('.checkAll').change(function(){
    var state = this.checked; //checked ? - true else false

    state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false);

    //change text
    state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All')
});


$('.checkAll').change(function(){
    var state = this.checked;
    state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false);
    state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

모든 확인란을 선택/선택 취소하려면 아래 코드를 사용하십시오.

jQuery(document).ready(function() {
    $("#check_uncheck").change(function() {
        if ($("#check_uncheck:checked").length) {
            $(".checkboxes input:checkbox").prop("checked", true);
        } else {
            $(".checkboxes input:checkbox").prop("checked", false);
        }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
    <input type="checkbox" name="check" id="check" /> Check Box 1
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 2
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 3
    <br/>
    <input type="checkbox" name="check" id="check" /> Check Box 4
</div>

데모 링크 사용

이를 위한 또 다른 간단한 방법이 있습니다. 아래 예제를 확인하십시오.이 예에서는 모든 확인란을 선택/선택 취소합니다. 선택하지 않으면 모두 선택되고, 선택하지 않으면 모두 선택 취소됩니다.

$("#check_uncheck").change(function() {
    $(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
    <br/>
    <br/>
    <div class="checkboxes">
        <input type="checkbox" name="check" id="check" /> Check Box 1
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 2
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 3
        <br/>
        <input type="checkbox" name="check" id="check" /> Check Box 4
    </div>

이 질문이 오래된 질문인 것은 알지만 대부분의 사람들이 확인란을 사용하고 있다는 것을 알게 되었습니다.허용된 답변은 단추를 사용하지만 여러 개의 단추(예: 페이지 맨 위에 하나, 맨 아래에 하나)와 함께 사용할 수 없습니다.그래서 여기 두 가지를 모두 수행하는 수정이 있습니다.

HTML

<a href="#" class="check-box-machine my-button-style">Check All</a>

jQuery

var ischecked = false;
$(".check-box-machine").click(function(e) {
    e.preventDefault();
    if (ischecked == false) {
        $("input:checkbox").attr("checked","checked");
        $(".check-box-machine").html("Uncheck All");
        ischecked = true;
    } else {
        $("input:checkbox").removeAttr("checked");
        $(".check-box-machine").html("Check All");
        ischecked = false;
    }
});

이렇게 하면 텍스트 및 확인란 값을 변경할 때 원하는 만큼의 단추를 사용할 수 있습니다.나는 포함했습니다.e.preventDefault()이것은 페이지가 상단으로 점프하는 것을 막을 것이기 때문에 호출합니다.href="#"

$(function () {
    $('input#check_all').change(function () {
        $("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
    });
});

여기 링크가 있습니다. 이 링크는 상위 확인란과 모든 하위 확인란을 선택 및 선택 취소하는 데 사용됩니다.

jquery 확인란 모든 확인란 선택 취소 Jquery With Demo 사용

$(function () {
        $("#select-all").on("click", function () {
            var all = $(this);
            $('input:checkbox').each(function () {
                $(this).prop("checked", all.prop("checked"));
            });
        });
    });

<script type="text/javascript">
    function myFunction(checked,total_boxes){ 
         for ( i=0 ; i < total_boxes ; i++ ){ 
           if (checked){   
             document.forms[0].checkBox[i].checked=true; 
            }else{  
             document.forms[0].checkBox[i].checked=false; 
            } 
        }   
    } 
</script>
    <body>
        <FORM> 
            <input type="checkbox" name="checkBox" >one<br> 
            <input type="checkbox" name="checkBox" >two<br> 
            <input type="checkbox" name="checkBox" >three<br> 
            <input type="checkbox" name="checkBox" >four<br> 
            <input type="checkbox" name="checkBox" >five<br> 
            <input type="checkbox" name="checkBox" >six<br> 
            <input type="checkbox" name="checkBox" >seven<br> 
            <input type="checkbox" name="checkBox" >eight<br> 
            <input type="checkbox" name="checkBox" >nine<br>
            <input type="checkbox" name="checkBox" >ten<br>  s
            <input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)"> 
            <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)"> 
        </FORM> 
    </body>

코드 블록에 추가하거나 단추를 클릭합니다.

$('input:checkbox').attr('checked',false);

$(document).ready( function() {
        // Check All
        $('.checkall').click(function () {          
            $(":checkbox").attr("checked", true);
        });
        // Uncheck All
        $('.uncheckall').click(function () {            
            $(":checkbox").attr("checked", false);
        });
    });

removeAttr()이후 버전의 jquery에서는 더 이상 작동하지 않습니다.당신은 할 수 .prop()기능.

$(document).ready(function(){
    $('.check:button').click(function(){
        $('input:checkbox').prop('checked',true);
        $(this).val('uncheck all')
    },function(){
        $('input:checkbox').prop('checked', false);
        $(this).val('check all');        
    })
})

모든 항목이 선택되어 있거나 선택되어 있지 않은 경우 컨트롤러에서 모두 선택/선택 취소

JS:

e = 확인란 ID t = 확인란(항목) 클래스 n = 확인란 모든 클래스 확인

function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i<r){jQuery("."+n).each(function(){this.checked=false})}})}

HTML:

모든 컨트롤 클래스 확인: chkall_ctrl

<input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/>
<br/>
1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/>
2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/>
3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/>
<br/>
<input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/>

<script>
jQuery(document).ready(function($)
{
  checkAll('chkall_up','chkall','chkall_ctrl');
  checkAll('chkall_down','chkall','chkall_ctrl');
});
 </script>

언급URL : https://stackoverflow.com/questions/5229023/how-do-i-check-uncheck-all-checkboxes-with-a-button-using-jquery

'programing' 카테고리의 다른 글

동적 열에서 하위 데이터를 가져오는 방법은 무엇입니까?  (0) 2023.09.04
Python의 .isoformat() 문자열을 datetime 개체로 다시 변환하는 방법  (0) 2023.09.04
장고 URL 리디렉션  (0) 2023.09.04
PHP: 문자열을 각 문자에 대해 배열로 분할  (0) 2023.09.04
C#에서 Excel interop 개체를 안전하게 폐기하시겠습니까?  (0) 2023.09.04

'programing'의 다른글

  • 현재글jQuery를 사용하여 버튼으로 모든 확인란을 선택/선택 취소하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바