Как проверить все флажки с помощью jQuery?


119

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

Сначала я пробовал использовать, attrа потом пробовал, propно что-то делаю не так.

Я сначала попробовал:

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

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

Но это не сработало.

Далее: это сработало лучше, чем код выше

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

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

Оба примера не работают.

JSFiddle: http://jsfiddle.net/hhZfu/4/


возможный дубликат .prop () vs .attr ()
Лиам

Возможный дубликат
Стюарт

1
вот ссылка на мой код, который делает именно это codepen.io/nickhq/pen/pZJVEr
Никсон

Ответы:


295

Вам нужно использовать .prop (), чтобы установить свойство checked

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

Демо: Fiddle


1
Вау, спасибо за быстрый ответ. Это работает хорошо, но в моем приложении есть один поддельный чек. когда я обновляю страницу ctrl+rи устанавливаю флажок, checkAllон меня не проверяет. После этого я должен снова проверить, чтобы все прошло успешно. Итак, мне нужно 2 раза щелкнуть по checkAllтому, что не работает при одном щелчке (один)? Я копирую, вставляю этот код и делаю функцию, checkAll()и в поле я установил флажокonclick="return checkAll()"
Иван

3
Если вы собираетесь использовать jQuery, используйте jQuery. Не рекомендуется смешивать jQuery со встроенным Javascript. Например, это плохо: <elementtag id="someID" onclick="javascript code here"--- Вместо этого используйте jQuery:$('#someID').click(function() { checkAll() });
cssyphus

4
Чем отличается ваш пост от этого ответа, зачем использовал not(this).prop?
Shaijut

1
@ArunPJohny, id должен быть уникальным на одной странице, как мы можем использовать ту же функцию на примере класса jsfiddle.net/52uny55w
Кришна Джонналагадда

@ArunPJohny, спасибо за уделенное время. Я хочу многому научиться у вас по jquery, можете ли вы посоветовать мне по jquery
Кришна Джонналагадда

44

Просто используйте checkedсвойство checkAllи используйте prop () вместо attr для свойства checked.

Живая демонстрация

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

Используйте prop () вместо attr () для таких свойств, как checked

Начиная с jQuery 1.6, метод .attr () возвращает undefined для атрибутов, которые не были установлены. Чтобы получить и изменить свойства DOM, такие как отмеченное, выделенное или отключенное состояние элементов формы, используйте метод .prop ()

У вас одинаковый идентификатор для флажков, и он должен быть уникальным . Вам лучше использовать какой-нибудь класс с зависимыми флажками, чтобы он не включал флажки, которые вам не нужны. Так $('input:checkbox')же установим все флажки на странице. Если ваша страница расширена новыми флажками, они также будут выделены / отменены. Что может быть не предполагаемым поведением.

Живая демонстрация

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

42

Полное решение здесь.

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html должен быть:

Одиночный флажок на отмеченных трех флажках будет установлен и отменен.

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

Надеюсь, это поможет кому-то так же, как и мне.

JS Fiddle https://jsfiddle.net/52uny55w/


3
Мне нравится это решение, так как если вы снимите отметку с одного из флажков, флажок «Отметить все» также станет снятым. Аналогичным образом, если вы вручную установите все соответствующие флажки, флажок «Отметить все» также будет установлен. Это отличная обратная связь с пользовательским интерфейсом!
HPWD

Вы можете сделать $("#checkedAll").changeфункцию короче, изменив ее на:var val = this.checked; $(".checkSingle").each( function() { this.checked=val; });
Gellie Ann

Кроме того, я думаю, что лучше переименовать isAllCheckedпеременную в isThereUncheckedили unCheckedоколо того, это будет более информативно относительно того, для чего эта переменная использовалась.
Джелли Энн

Я принял это решение, это то, что я ищу, спасибо
Аджай Кумар

10

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

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

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


Спасибо! Я предпочитаю это, потому что после установки всех флажков, когда мы снимаем отметку с одного из них, флажок проверять все будет снят.
Rizqi N. Assyaufi

7

Почему бы вам не попробовать это (во второй строке, где 'form #' вам нужно указать правильный селектор вашей html-формы):

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

Ваш html должен быть таким:

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

Надеюсь, это поможет.


5

HTML:

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

JQuery:

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

Демо: FIDDLE



2
$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});

1

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

Для людей, которые все еще ищут плагин для управления флажками через облегченный, имеющий готовую поддержку UniformJS и iCheck и не отмеченный, когда хотя бы один из контролируемых флажков не установлен (и проверяется, когда все контролируемые флажки отмечены или конечно) Я создал плагин jQuery checkAll .

Не стесняйтесь проверять примеры на странице документации .


Для этого примера вопроса все, что вам нужно сделать, это:

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

Разве это не ясно и просто?


1
    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

И jquery

$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });

1

Вы можете работать .prop()с результатами jQuery Selector напрямую, даже если он возвращает более одного результата. Так:

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


0

Обычно вы также хотите, чтобы флажок главного устройства был снят, если не отмечен хотя бы один флажок подчиненного устройства, и чтобы он был отмечен, если отмечены все флажки подчиненного устройства:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAll(masterId, slaveName) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

И если вы хотите включить какой-либо элемент управления (например, Remove Allкнопку или Add Somethingкнопку), когда установлен хотя бы один флажок, и отключить, если флажок не установлен:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
 * enables or disables a control when a checkbox is checked
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        switchControl(controlId, $slave.filter(':checked').length > 0);
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

/**
 * Enables or disables a control
 * @param controlId is the control-id
 * @param enable is true, if control must be enabled, or false if not
 */
function switchControl(controlId, enable) {
    var $control = $('#' + controlId);
    if (enable) {
        $control.removeProp('disabled');
    } else {
        $control.prop('disabled', 'disabled');
    }
}

0

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

Код jQuery

<SCRIPT language="javascript">
$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
</SCRIPT>

Посмотреть демо

Нажмите здесь, чтобы просмотреть демо


0

используйте .prop (), чтобы получить значение свойства

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

0

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

я старался как мог

/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}

Я надеюсь, это поможет!


0
function checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}

0

checkall - это идентификатор всех флажков, а cb-child - это имя каждого флажка, который будет отмечен и снят в зависимости от события щелчка checkall

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });

0

* СЦЕНАРИЙ JAVA ДЛЯ ВЫБОРА ВСЕХ ПРОВЕРКИ *

Лучшее решение .. Попробуйте

<script type="text/javascript">
        function SelectAll(Id) {
            //get reference of GridView control
            var Grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the Grid
            var cell;

            if (Grid.rows.length > 0) {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];

                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) {
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type == "checkbox") {
                            //Assign the Status of the Select All checkbox to the cell checkbox within the Grid
                            cell.childNodes[j].checked = document.getElementById(Id).checked;
                        }
                    }
                }
            }
        }
    </script>

-1

Вы можете использовать ниже простой код:

function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i < pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}

Пример использования:

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>

-1
if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}   

пожалуйста, измените строку выше на

if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}   

в ответе SSR и его работе отлично Спасибо


-1
if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }  

Было бы удобно, если бы вы объяснили ответ.
enkor 02

если вы установите этот флажок, тогда все флажки будут отмечены как ID, а затем вы снимите флажок, затем все флажки
будут сняты


-1

html:

    <div class="col-md-3 general-sidebar" id="CategoryGrid">
                                                    <h5>Category &amp; Sub Category <span style="color: red;">* </span></h5>
                                                    <div class="checkbox">
                                                        <label>
                                                            <input onclick="checkUncheckAll(this)" type="checkbox">
                                                            All
                                                        </label>
                                                    </div>
                                                <div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>

JavaScript:

function checkUncheckAll(ele) {
    if (ele.checked) {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
    else {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
}

-1
            <pre>
            <SCRIPT language="javascript">
            $(function(){
                // add multiple select / deselect functionality
                $("#selectall").click(function () {
                      $('.case').attr('checked', this.checked);
                });

                // if all checkbox are selected, check the selectall checkbox
                // and viceversa
                $(".case").click(function(){

                    if($(".case").length == $(".case:checked").length) {
                        $("#selectall").attr("checked", "checked");
                    } else {
                        $("#selectall").removeAttr("checked");
                    }

                });
            });
            </SCRIPT>
            <HTML>
            <HEAD>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
            </HEAD>
            <BODY>
            <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
            <table border="1">
              <tr>
                <th><input type="checkbox" id="selectall"/></th>
                <th>Cell phone</th>
                <th>Rating</th>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
                <td>BlackBerry Bold 9650</td>
                <td>2/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
                <td>Samsung Galaxy</td>
                <td>3.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
                <td>Droid X</td>
                <td>4.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
                <td>HTC Desire</td>
                <td>3/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
                <td>Apple iPhone 4</td>
                <td>5/5</td>
              </tr>
            </table>
            </BODY>
            </HTML>
            </pre>

ошибка скрипта в коде. Сначала необходимо загрузить скрипт.
Сатиш Шетти

-1
function chek_al_indi(id)
{
    var k = id;
    var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
    var std_cnt = 10;

    if ($('#'+ k).is(":checked"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',true);  
            k = k + cnt_descriptiv_indictr;
        }
    }

    if ($('#'+ k).is(":not(:checked)"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',false);     
            k = k + cnt_descriptiv_indictr;
        }       
    }
}

Почему долгая функция?
Джимми Обоньо Абор

-2

Триггерный щелчок

$("#checkAll").click(function(){
    $('input:checkbox').click();
});

ИЛИ

$("#checkAll").click(function(){
    $('input:checkbox').trigger('click');
});

ИЛИ

$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.