jQuery check снимите все флажки с помощью кнопки

Я пытаюсь проверить / снять все флажки с помощью jquery. Теперь, установив / сняв флажок родителя, все дочерние флажки будут выбраны / сняты также с текстом родительского флажка, который будет изменен на checkall / uncheckall.



теперь я хочу заменить Родительский флажок кнопкой ввода и изменить текст также на кнопке, чтобы проверить/снять флажок. Это код, может кто-нибудь, пожалуйста, настроить код....



    $( 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
600   21  

21 ответов:

попробуй это :

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

демо

201  
2013-01-15 13:37:49

Это самый короткий путь, который я нашел (нуждается в jQuery1. 6+)

HTML:

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

JS:

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

Я использую .опора как .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>
95  
2016-06-15 05:37:29

Попробуйте Вот Это:

HTML

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

JavaScript

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

демо

17  
2012-04-13 17:06:54

Html

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

Javascript

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});
13  
2011-12-10 16:28:47

решение для переключения флажков с помощью кнопки, совместимой с jQuery 1.9+ where toogle-событие больше не доступно:

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

демо

4  
2013-05-08 18:11:57

попробуйте это:

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

e - это событие генерируется, когда вы делаете click и e.target - это элемент нажали (.checkAll), так что вам нужно только поставить свойство checked элементов с классом .cb-element как элемент с классами. проверь все.

PS: извините мой плохой английский!

4  
2017-12-04 08:50:20

лучшее решение здесь Проверить Скрипку

$("#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
2  
2015-05-29 14:33:54

попробуй такое 

$(".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
    }
});
1  
2011-03-08 08:19:32

бессовестная самореклама: для этого есть плагин 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

1  
2012-08-17 03:05:27

попробуйте это,

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">
1  
2013-06-24 13:04:22

можно использовать 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
1  
2015-04-06 19:01:22

попробуйте ниже код, чтобы проверить / снять все флажки

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 all checkbox установлен или нет, если установлен, то все будет проверено, и если не все будет снято

$("#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>
1  
2017-12-04 09:01:48

Я знаю, этот вопрос старый, но я заметил, что большинство людей используют флажок. Принятый ответ использует кнопку, но не может работать с несколькими кнопками (исх. один в верхней части страницы один внизу). Итак, вот модификация, которая делает и то, и другое.

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="#" часть.

0  
2013-06-06 01:49:08 
$(function () {
    $('input#check_all').change(function () {
        $("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
    });
});
0  
2015-02-09 09:54:36

вот ссылка, которая используется для проверки и снятия родительского флажка, и все дочерние флажки выбираются и снимаются.

jQuery check снимите все флажки с помощью Jquery Демо

$(function () {
        $("#select-all").on("click", function () {
            var all = $(this);
            $('input:checkbox').each(function () {
                $(this).prop("checked", all.prop("checked"));
            });
        });
    });
0  
2015-04-29 13:34:13 
<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>
0  
2015-11-16 16:00:42

добавьте это в свой блок кода, или даже нажмите кнопку

$('input:checkbox').attr('checked',false);
0  
2016-09-05 11:21:47 
$(document).ready( function() {
        // Check All
        $('.checkall').click(function () {          
            $(":checkbox").attr("checked", true);
        });
        // Uncheck All
        $('.uncheckall').click(function () {            
            $(":checkbox").attr("checked", false);
        });
    });
0  
2017-09-26 11:55:40

ниже код будет работать, если пользователь выбирает все checkboxs, то check all-checkbox будет проверен, и если пользователь снимет какой-либо один флажок, то check all-checkbox будет снят.

$("#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
0  
2017-12-26 13:02:22

согласился с коротким ответом Ричарда Гарсайда, но вместо того, чтобы использовать 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>
0  
2018-02-06 06:20:03

проверьте все с помощью uncheck / check controller, если все элементы/не проверяются

JS:

e = checkbox id t= checkbox (item) class n= checkbox check all class

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>
-1  
2014-10-25 20:51:10

Comments

    Ничего не найдено.
Click here to cancel reply.