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

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

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

当前回答

这样就可以完成工作了:

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

2013-02-26 15:11:49

其他回答

<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

这样就可以完成工作了:

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

2013-02-26 15:11:49

JavaScript是最好的选择。下面的链接给出了一个使用按钮取消/全选的例子。你可以尝试调整它来使用复选框，只需使用你的“全选”复选框的onClick属性。

Javascript函数来检查或取消所有复选框

本页有一个更简单的示例

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

2008-12-22 13:56:13

也许有点晚了，但是当处理“全部选中”复选框时，我相信您还应该处理当您选中“全部选中”复选框，然后取消选中下面的一个复选框时的场景。

在这种情况下，它应该自动取消勾选所有复选框。

此外，当手动选中所有复选框时，您应该最终自动选中所有复选框。

您需要两个事件处理程序，一个用于勾选全部框，另一个用于单击下面的任何单个框。

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

2018-06-14 20:42:03

简单扼要:

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

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

推荐文章

最新文章

标签