需求:
A.全选: 点击全选,所有选项被选中;
B.全不选:全选情况下再次点击全选框,所有选项都不选;
C:全选情况下,取消某一个或几个子选项,全选框也变为不选中;
没有点击全选的情况下,选中了所有子选项,全选框自动选中。
代码示例:
html代码:
<table>
<tr></td><input type="checkbox" name="chb[]" id="all" onclick="setChecked(this)"/>全选</td></tr>
<tr></td><input type="checkbox" name="chb[]" onclick="setChecked(this)"/>1选</td></tr>
<tr></td><input type="checkbox" name="chb[]" onclick="setChecked(this)"/>2选</td></tr>
<tr></td><input type="checkbox" name="chb[]" onclick="setChecked(this)"/>3选</td></tr>
<tr></td><input type="checkbox" name="chb[]" onclick="setChecked(this)"/>4选</td></tr>
</table>
JAvaScript代码:
<script>
function setChecked(obj)
{
var chbs=document.getElementsByName("chb[]");//获取到复选框的名称
//全选
//JS的if判断中Undefined类型视为false,其他类型视为true;
//obj.id是定义过的值,类型为非Undefined,所以视为true。
if(obj.id)
{
for(var i=1;i<chbs.length;i++)
{
//若全选框的结果为选中,则进行全选操作,否则进入下一步
//obj.checked表示复选框当前状态,已选为true,未选为false。
if(obj.checked == true)
{
var chb = chbs[i];
chb.checked = true;
}
}
//全不选
for(var i=1;i<chbs.length;i++)
{
//若全选框的结果为没选中,则进行全不选操作,否则进入下一步
if(obj.checked == false)
{
var chb = chbs[i];
chb.checked = false;
}
}
}else
{
//若子选择全选,全选框也选中。
if(chbs[1].checked && chbs[2].checked && chbs[3].checked && chbs[4].checked)
{
chbs[0].checked = true;
}else//若子选项没有全选,全选框不选中。
{
chbs[0].checked = false;
}
}
}
效果演示:
欢迎关注我的公众号——数据杨公子。本公众号会分享包括但不限于大数据、数据治理、元数据管理、python 等方面的技术文章,主旨是和大家一起共同成长,用技术来认识我们这个数据的时代。