最近我在写一个表格,需要实现一个“全选”功能,于是我使用了javascript来实现它。
首先,我们需要在html中加入一个复选框,用于实现全选功能:
<input type="checkbox" id="checkAll">全选
然后,在javascript中,我们需要写一个函数,实现当这个复选框被选中时,将全部的复选框都选中,取消选中时则取消全部的复选框选中状态:
var checkboxs = document.getElementsByTagName('input'); var checkAll = document.getElementById('checkAll'); checkAll.onclick = function(){ for(var i=0;i<checkboxs.length;i++){ checkboxs[i].checked = checkAll.checked; } }
以上代码中,我们首先获取了所有的复选框,然后使用getElementById方法获取到全选复选框。在全选复选框的onclick事件中,我们遍历了所有的复选框,将它们的checked属性设置为checkAll的checked属性,从而实现了全选和取消全选的功能。
如果我们只想全选部分复选框,可以给这些复选框设置一个固定的class名称,然后对这些复选框进行遍历,实现部分全选的效果:
var checkboxs = document.getElementsByClassName('some-class'); var checkAll = document.getElementById('checkAll'); checkAll.onclick = function(){ for(var i=0;i<checkboxs.length;i++){ checkboxs[i].checked = checkAll.checked; } }
以上代码中,我们使用了getElementsByClassName方法获取了所有class名称为some-class的复选框,然后与之前的代码相同,实现了全选和取消全选的效果。
如果我们需要监听每个复选框的选中状态,可以在遍历时给每个复选框添加一个onclick事件:
var checkboxs = document.getElementsByTagName('input'); var checkAll = document.getElementById('checkAll'); checkAll.onclick = function(){ for(var i=0;i<checkboxs.length;i++){ checkboxs[i].checked = checkAll.checked; checkboxs[i].onclick = function(){ checkAll.checked = true; for(var j=0;j<checkboxs.length;j++){ if(!checkboxs[j].checked){ checkAll.checked = false; break; } } } } }
以上代码中,我们在复选框的onclick事件中,遍历所有复选框,如果有一个未被选中,则将全选复选框的checked属性设置为false。
总之,javascript的全选框功能可以便捷地实现我们的需求,同时还有很多细节需要注意,比如如何处理已经选中的复选框等等。希望这篇文章能够帮助大家实现自己的全选框功能。