原生js实现全选单选影响全选

Posted 不想掉头发啊!!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现全选单选影响全选相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    ul 
        list-style: none;
    
</style>
<body>
<ul>
    <li>全选<input type='checkbox' id='all'></li>
    <li>Java<input type='checkbox' class='item'></li>
    <li>javascript<input type='checkbox' class='item'></li>
    <li>C++<input type='checkbox' class='item'></li>
    <li>python<input type='checkbox' class='item'></li>
    <li>.net<input type='checkbox' class='item'></li>
</ul>

<script>
    // 补全代码
    const selectAll = document.querySelector('#all')
    const items = Array.from(document.querySelectorAll('.item'))
    selectAll.onchange =  () => 
        items.forEach(item => item.checked = selectAll.checked)
    
    items.forEach(item => 
        item.onchange =  () => 
            selectAll.checked = items.every(item => item.checked)
        
    )
</script>
</body>
</html>


以上是关于原生js实现全选单选影响全选的主要内容,如果未能解决你的问题,请参考以下文章

ElementUI el-checkbox实现全选反选单选

全选取消全选单选

原生js实现全选和反选以及任意一个未被选中的效果

原生js实现的复选框的全选和全不选效果

使用vue实现全选与取消全选

Jquery全选单选功能