如何在HTML中实现“全选”复选框?

我有一个带有多个复选框的HTML页面。

我需要一个名称为“全选”的复选框。当我选择此复选框时，HTML页面中的所有复选框都必须被选中。我该怎么做呢?

当前回答

简单扼要:

jQuery -点击按钮或div或标签元素。勾选页面上的所有复选框。请记住，您必须调整:复选框，使其更具体。

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

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

});

2016-10-06 14:44:42

其他回答

我很惊讶没有人提到document.querySelectorAll()。纯JavaScript解决方案，工作在IE9+。

函数切换(源){ var checkboxes = document.querySelectorAll('input[type="checkbox"]'); For (var I = 0;I < checkboxes.length;我+ +){ If(复选框[i] != source) [我]复选框。Checked = source.checked; ｝｝ <input type="checkbox" onclick="切换(此);"/ >检查所有吗?< 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 />

2016-02-05 06:58:49

这就是它的作用，例如，如果你有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)
      }
  })

2018-07-19 06:59:13

使用jQuery和knockout:

由于此绑定主复选框与底层复选框保持同步，除非所有复选框都已选中，否则它将未选中。

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

2015-08-31 17:45:21

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

2014-11-09 10:28:25

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

2012-12-21 10:36:36

如何在HTML中实现“全选”复选框?

推荐文章

最新文章

标签