jquery check снимите все флажки с помощью кнопки - PullRequest
Новая
       98

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

145 голосов
/ 08 марта 2011

Я пытаюсь установить / снять все флажки, используя 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

Ответы [ 23 ]

213 голосов
/ 08 марта 2011

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

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

DEMO

101 голосов
/ 28 июля 2013

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

HTML: 

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

JS: 

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

Яиспользование .prop в качестве .attr не работает для флажков в jQuery 1.6+, если вы явно не добавили проверенный атрибут в свой входной тег.

Example- 

$("#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>
17 голосов
/ 13 апреля 2012

Попробуйте:

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

DEMO

14 голосов
/ 10 декабря 2011

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);
    }
});
5 голосов
/ 26 ноября 2014

Попробуйте: 

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

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

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

4 голосов
/ 08 мая 2013

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

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

DEMO

2 голосов
/ 29 мая 2015

Лучшее решение здесь Проверка скрипки 

$("#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 голосов
/ 26 декабря 2017

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

$("#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
2 голосов
/ 06 февраля 2018

Согласился с кратким ответом Ричарда Гарсайда, но вместо использования prop() в $(this).prop("checked") вы можете использовать нативное свойство JS checked , флажок like, 

$("#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>
2 голосов
/ 23 октября 2018

Вы можете попробовать это 

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

Класс .checkAll - это флажок, который управляет массовым действием

Страница:
...