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

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

193 голосов
/ 22 декабря 2008

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

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

Ответы [ 29 ]

7 голосов
/ 20 марта 2015

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

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});
6 голосов
/ 15 апреля 2016

Этот пример работает с собственным 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>
6 голосов
/ 22 декабря 2008

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

Функция Javascript, чтобы установить или снять все флажки

У этой страницы более простой пример

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

3 голосов
/ 09 мая 2012 
<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>
3 голосов
/ 06 июля 2011

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

Html 

<input type="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 

jQuery("[name=selectThemAll]").click(function(source) { 
    checkboxes = jQuery("[name=foo]");
    for(var i in checkboxes){
        checkboxes[i].checked = source.target.checked;
    }
});
2 голосов
/ 26 февраля 2013

что должно сделать работу: 

    $(':checkbox').each(function() {
        this.checked = true;                        
    });
2 голосов
/ 09 ноября 2014 
$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });
2 голосов
/ 31 августа 2015

Использование 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"/>
2 голосов
/ 21 октября 2016

Вот форма: 

    <form action="#">
        <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

        <fieldset>
            <legend>Loads of checkboxes</legend>
            <p><label><input type="checkbox" /> Option 1</label></p>
            <p><label><input type="checkbox" /> Option 2</label></p>
            <p><label><input type="checkbox" /> Option 3</label></p>
            <p><label><input type="checkbox" /> Option 4</label></p>
        </fieldset>
    </form>

и вот jquery: 

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
1 голос
/ 19 июля 2018

Это то, что это будет делать, например, если у вас есть 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)
      }
  })
Страница:
...