Как реализовать флажок «выбрать все» в HTML?

Question

У меня есть HTML-страница с несколькими флажками.

Мне нужен еще один флажок с именем «выбрать все». Когда я выбираю этот флажок, все флажки на странице HTML должны быть установлены. Как я могу это сделать?

Answer 1

Вы можете иметь разных наборов флажков в одной форме . Вот решение, которое выбирает / отменяет выбор флажков по имени класса, используя ванильную функцию JavaScript document.getElementsByClassName

Кнопка Выбрать все

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

Некоторые из флажков для выбора

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

JavaScript

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

Answer 2

1: добавить обработчик события onchange

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: изменить код для обработки отмеченных / не отмеченных

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

Answer 3

HTML

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

Javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

Answer 4

Вот реализация backbone.js:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

Answer 5

Поскольку я не могу комментировать, вот как ответ: Я бы написал решение Can Berk Güder в более общем виде, так что вы можете использовать эту функцию для других флажков

<script language="JavaScript">
function toggleCheckboxes(source,cbName) {
  checkboxes = document.getElementsByName(cbName);
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked; }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Answer 6

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

В этом случае он должен автоматически снять флажок флажок все.

Кроме того, при ручной проверке всех флажков вы должны в конечном итоге установить флажок флажок все автоматически.

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

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

Answer 7

, чтобы сделать его в сокращенной версии с помощью jQuery

Флажок Выбрать все

<input type="checkbox" id="chkSelectAll">

Флажок для детей

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

JQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})

Answer 8

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

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

Answer 9

Простой и ТОЧКА:

jQuery - после нажатия кнопки, элемента div или элемента label. Отметьте все флажки на странице. Имейте в виду, что вам придется настроить флажок: чтобы сделать его более конкретным.

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});