Wie implementiert man das Kontrollkästchen "Alles auswählen" in HTML?

Question

Ich habe eine HTML-Seite mit mehreren Kontrollkästchen.

Ich benötige ein weiteres Kontrollkästchen mit dem Namen "select all". Wenn ich dieses Kontrollkästchen auswähle, müssen alle Kontrollkästchen auf der HTML-Seite ausgewählt werden. Wie kann ich dies tun?

Answer 1

Mit Hilfe von jQuery in eine Kurzversion umzuwandeln

Das Kontrollkästchen Alle auswählen

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

Das Kontrollkästchen Kinder

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

Verwendung von jQuery und Knockout:

Mit dieser Bindung bleibt das Haupt-Kontrollkästchen mit den darunter liegenden Kontrollkästchen synchronisiert, es wird nicht markiert, wenn nicht alle Kontrollkästchen markiert sind.

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

in 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"/>

Answer 3

Die folgenden Methoden sind sehr einfach zu verstehen und Sie können bestehende Formulare in wenigen Minuten implementieren

Mit Jquery,

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

in HTML-Form die folgenden Schaltflächen einfügen

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

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

in HTML-Form die folgenden Schaltflächen einfügen

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

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

Answer 4

Sie können diesen Code verwenden.

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

Answer 5

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