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

JavaScript - ваш лучший выбор. Ссылка ниже дает пример использования кнопок для отмены / выбора всего. Вы можете попытаться адаптировать его для использования флажка, просто используйте флажок «Выбрать все» в атрибуте onClick.

Функция Javascript для установки или снятия всех флажков

На этой странице есть более простой пример

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

<script language = "JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type = "checkbox" onClick = "toggle(this)" /> 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/>

Обновлено:

Конструкция for each...in не работает, по крайней мере, в этом случае, в Safari 5 или Chrome 5. Этот код должен работать во всех браузерах:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Используя jQuery:

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if (this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

HTML:

<input type = "checkbox" name = "checkbox-1" id = "checkbox-1" />
<input type = "checkbox" name = "checkbox-2" id = "checkbox-2" />
<input type = "checkbox" name = "checkbox-3" id = "checkbox-3" />

<!-- select all boxes -->
<input type = "checkbox" name = "select-all" id = "select-all" />

Если вы принимаете верхний ответ для jQuery, помните, что объект, переданный в функцию щелчка, является EventHandler, а не исходным объектом флажка. Поэтому код следует изменить следующим образом.

HTML

<input type = "checkbox" name = "selectThemAll"/> 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/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})

<asp:CheckBox ID = "CheckBox1" runat = "server" Text = "Select All" onclick = "checkAll(this);" />
<br />
<asp:CheckBoxList ID = "CheckBoxList1" runat = "server">
    <asp:ListItem Value = "Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value = "Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value = "Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value = "Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value = "Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value = "Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type = "text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

вот другой способ меньше кода

$(function () {
       $('#select-all').click(function (event) {
          
           var selected = this.checked;
           // Iterate each checkbox
           $(':checkbox').each(function () {    this.checked = selected; });

       });
    });

Демо http://jsfiddle.net/H37cb/

<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js" /></script>

<script type = "text/javascript">
$(document).ready(function(){

$('input[name = "all"],input[name = "title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type = "checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id = "wrapper">
 <li style = "margin-top: 20px">
  <input type = "checkbox" name = "all" id = "all" /> <label for='all'>All</label>
  <ul>
   <li><input type = "checkbox" name = "title" id = "title_1" /> <label for = "title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type = "checkbox" name = "selected[]" id = "box_1" value = "1" /> <label for = "box_1">Sub Title 01</label></li>
     <li><input type = "checkbox" name = "selected[]" id = "box_2" value = "2" /> <label for = "box_2">Sub Title 02</label></li>
     <li><input type = "checkbox" name = "selected[]" id = "box_3" value = "3" /> <label for = "box_3">Sub Title 03</label></li>
     <li><input type = "checkbox" name = "selected[]" id = "box_4" value = "4" /> <label for = "box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type = "checkbox" name = "title" id = "title_2" /> <label for = "title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type = "checkbox" name = "selected[]" id = "box_5" value = "5" /> <label for = "box_5">Sub Title 05</label></li>
     <li><input type = "checkbox" name = "selected[]" id = "box_6" value = "6" /> <label for = "box_6">Sub Title 06</label></li>
     <li><input type = "checkbox" name = "selected[]" id = "box_7" value = "7" /> <label for = "box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>

<html>

<head>
<script type = "text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if (button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type = "checkbox" name = "approve[]" value = "1" />
<input type = "checkbox" name = "approve[]" value = "2" />
<input type = "checkbox" name = "approve[]" value = "3" />

<input type = "button" id = "toggle" value = "select" onClick = "do_this()" />
</body>

</html>

это должно сделать свою работу:

    $(':checkbox').each(function() {
        this.checked = true;                        
    });

Я не уверен, что никто не ответил таким образом (используя jQuery):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type = "checkbox"]' ).prop('checked', this.checked)
  })

Он чистый, без циклов или предложений if / else и работает как шарм.

Немного измененная версия, которая корректно проверяет и снимает отметки

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

Когда вы позвоните в document.getElementsByName("name"), вы получите Object. Используйте .item(index) для обхода всех элементов Object

HTML:

<input type = "checkbox" onclick = "for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​

$(document).ready(function() {
                $(document).on(' change', 'input[name = "check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

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

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});

Использование jQuery и нокаута:

С этой привязкой основной флажок остается синхронизированным с нижележащими флажками, он будет снят, если не отмечены все флажки.

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

в html:

<input id = "check-all-values" type = "checkbox" data-bind = "allChecked: '.checkValue'"/>
<input id = "check-1" type = "checkbox" class = "checkValue"/>
<input id = "check-2" type = "checkbox" class = "checkValue"/>

Я удивлен, что никто не упомянул document.querySelectorAll(). Решение на чистом JavaScript, работает в IE9 +.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type = "checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type = "checkbox" onclick = "toggle(this);" />Check all?<br />

<input type = "checkbox" />Bar 1<br />
<input type = "checkbox" />Bar 2<br />
<input type = "checkbox" />Bar 3<br />
<input type = "checkbox" />Bar 4<br />

Этот пример работает с собственным JavaScript, где имя переменной флажка меняется, то есть не все "foo".

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
        {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
    checkboxes = getcheckboxes();
    for (var i = 0 n = checkboxes.length; i < n; i++) 
    {
        checkboxes[i].checked = source.checked;
    }
}
</script>    

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

<input type = "checkbox" onClick = "toggle(this)" /> Toggle All<br/>

</body>
</html>

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

Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

Пример HTML:

<p><input onClick = "setAllCheckboxes('actors', this);" type = "checkbox" />All of them</p>
<div id = "actors">
    <p><input type = "checkbox" name = "kevin" />Spacey, Kevin</p>
    <p><input type = "checkbox" name = "colin" />Firth, Colin</p>
    <p><input type = "checkbox" name = "scarlett" />Johansson, Scarlett</p>
</div>

Я надеюсь тебе понравится!

Вот реализация 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;
    }

},

Просто и ТОЧНО:

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

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

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

});

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

1: Добавить обработчик событий по изменению

<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.info(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

У вас может быть разные наборы флажков на одной и той же форме. Вот решение, которое выбирает / снимает флажки по имени класса, используя ванильную функцию 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;
        }
    }

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

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

сделать это в сокращенной версии с помощью 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);  
})

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

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

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

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

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

Это то, что это будет делать, например, если у вас есть 5 флажков, и вы нажимаете проверить все, он проверяет все, теперь, если вы снимете все флажки, возможно, щелкнув каждые 5 флажков, к тому времени, когда вы снимете последний флажок, выберите все флажки также снимаются

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if ($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if ($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

Поскольку я не могу комментировать, вот как ответ: Я бы написал решение Джана Берка Гюдера в более общем виде: поэтому вы можете повторно использовать эту функцию для других флажков

<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/>
<input type = "checkbox" name = "foo" value = "bar5"> Bar 5<br/>

Методы, представленные ниже, очень просты для понимания, и вы можете реализовать существующие формы за считанные минуты.

With Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

в форме HTML поместите кнопки ниже

<a id = "check-all" href = "javascript:void(0);">check all</a>
<a id = "uncheck-all" href = "javascript:void(0);">uncheck all</a> 

With just using javascript,

<script type = "text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

в форме HTML поместите кнопки ниже

<button onclick = "javascript:checkAll('form3', true);" href = "javascript:void();">check all</button>

<button onclick = "javascript:checkAll('form3', false);" href = "javascript:void();">uncheck all</button>

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

var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
  let checkboxes = document.querySelectorAll(".dlMultiDelete");
  checkboxes.forEach(function (ele) {
    ele.checked = !!checkbox.checked;
  });
});