JQuery Checkbox проверить все

Question

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

Благодаря

Answer 1

Вы должны использовать .prop() для установки проверяемого свойству

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

Демо: Fiddle

Answer 2

Просто используйте checked свойство checkAll и использования использование prop() вместо ATTR зарегистрированного имущества

Live Demo

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

Use prop() instead of attr() for properties like checked

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

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

Live Demo

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

Answer 3

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

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> 

Answer 4

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

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

Answer 5

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

измените эту строку на

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

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

Answer 6

Почему бы вам не попробовать это (в 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> 

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

Answer 7

Trigger Нажмите

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

ИЛИ

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

ИЛИ

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

Answer 8

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

Answer 9

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

Answer 10

$('#checkall').on("click",function(){ 
     $('.chk').trigger("click"); 
    }); 

Answer 11

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

Answer 12

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

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

Answer 13

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> 

Просмотреть демонстрационную версию

Click here to View Demo

Answer 14

  <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> 

Answer 15

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

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

Answer 16

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

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

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

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

Answer 17

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

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

Не стесняйтесь проверить примеры на documentation page.

---

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

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

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

Answer 18

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

Answer 19

Простейшее способ я знаю:

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

Answer 20

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

Answer 21

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

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

Answer 22

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