仿购物车 全选-反选-删除-全部删除

原创 978990968 随笔 原生js 298阅读 2018-03-20 15:21:40 举报

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>反选-全选-删除-全部删除</title>
    <style type="text/css">
        #checkedbok {
            display: flex;
        }

        #checkedbok,
        #checkedbokbtn {
            width: 600px;
            height: auto;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id='checkedbok'>
        <p><input type="checkbox" name="" id="" value="" />01</p>
        <p><input type="checkbox" name="" id="" value="" />02</p>
        <p><input type="checkbox" name="" id="" value="" />03</p>
        <p><input type="checkbox" name="" id="" value="" />04</p>
        <p><input type="checkbox" name="" id="" value="" />05</p>
        <p><input type="checkbox" name="" id="" value="" />06</p>
        <p><input type="checkbox" name="" id="" value="" />07</p>
        <p><input type="checkbox" name="" id="" value="" />08</p>
    </div>
    <div id='checkedbokbtn'>
        <button type='button' id='getBtn'>全选</button>
        <button type='button' id='ungetBtn'>反选</button>
        <button type='button' id='deletBtn'>删除</button>
        <button type='button' id='allDelet'>全部删除</button>
    </div>
</body>

</html>

<script>
/获取点击元素的方法/
function $id(id) {
return document.getElementById(id)
}
/获取标签元素的方法/
function $TagName(Tagname) {
return document.getElementsByTagName(Tagname)
}
/添加事件的监听/
$id('checkedbokbtn').addEventListener('click', function(ev) {
// 获取当前元素
var targetEle = ev.target || ev.srcElement
if(targetEle.id == 'getBtn') { /全选按钮/
for(let i = 0, len = $TagName('input').length; i < len; i++) {
$TagName('input')[i].checked = true
}
} else if(targetEle.id == 'ungetBtn') { /反选按钮/
for(let i = 0, len = $TagName('input').length; i < len; i++) {
if($TagName('input')[i].checked) {
$TagName('input')[i].checked = false
} else {
$TagName('input')[i].checked = true
}
}
} else if(targetEle.id == 'deletBtn') { /删除按钮/
for(let i = 0, len = $TagName('input').length; i < len; i++) {
if($TagName('input')[i].checked) {
$TagName('input')[i].parentNode.style.display = 'none'
}
}
} else if(targetEle.id == 'allDelet') { /全部删除按钮/
for(let i = 0, len = $TagName('input').length; i < len; i++) {
if($TagName('input')[i].checked) {
$TagName('input')[i].parentNode.style.display = 'none'
}
}
}
}, false)
</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复