JQuery флажок проверить все

Я не эксперт с 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/



спасибо

558   26  

26 ответов:

вы должны использовать .prop () установить свойство checked

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

Demo:Скрипка

202  
2014-06-04 12:45:51

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

Демо

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

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

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

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

Демо

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});
32  
2015-03-03 06:26:01

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

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

30  
2017-10-23 14:30:55

самый простой способ, который я знаю:

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

5  
2017-06-22 01:38:27

почему бы вам не попробовать это (во 2-й строке, где '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>

Я надеюсь, что помогает.

4  
2014-11-15 09:20:10

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

демо: скрипка

3  
2017-07-29 19:04:02

Я думаю, что когда пользователь выбирает все флажки вручную, то 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
3  
2018-05-07 08:37:10

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

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

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

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

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

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

1  
2017-05-17 15:14:58

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

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

1  
2017-10-30 23:26:14

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

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

и если вы хотите включить любой контроль (например или 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  
2016-01-15 18:30:47

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  
2016-05-11 11:37:54

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

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
0  
2016-11-09 17:47:52

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

Я старался изо всех сил

/*----------------------------------------
 *  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  
2017-02-07 09:07:55 
    <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);
 });
0  
2017-06-21 12:26:30 
function checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}
0  
2018-02-19 19:07:43 
$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});
0  
2018-09-07 09:58:48

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

$("#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  
2018-09-26 13:06:01

* JAVA SCRIPT, ЧТОБЫ УСТАНОВИТЬ ФЛАЖОК ВСЕ*

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

<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>
0  
2018-10-06 14:32:02

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

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  
2014-08-15 15:26:16 
if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}

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

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

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

-1  
2014-11-05 08:17:54

Триггер Нажмите Кнопку

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

или

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

или

$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});
-1  
2015-01-28 04:55:51 
if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }
-1  
2015-03-02 07:31:50 
 $('#checkall').on("click",function(){
      $('.chk').trigger("click");
   });
-1  
2015-09-24 16:01:20

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  
2015-10-09 07:53:06 
            <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  
2016-10-28 10:15:38 
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;
        }       
    }
}
-1  
2017-10-23 15:58:39

Comments

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