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

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

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

当前回答

使用jQuery制作的简写版本

全选复选框

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

children复选框

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

2018-04-26 15:48:35

其他回答

如果采用jQuery的顶部答案，请记住传递给click函数的对象是一个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;
        }
    });
})

2011-07-06 11:45:51

使用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; }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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" />  <input type="checkbox" name="select-all" id="select-all" />

2010-02-03 09:50:07

<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

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

更新:

对于每个…in construct似乎不能工作，至少在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;
  }
}

2008-12-22 14:01:23

当你调用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/">

2013-11-15 10:15:57

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

推荐文章

最新文章

标签