前端学习笔记之多选框
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>多選框</title>
<style>
*{
margin:0px;
padding:0px;
}
ul{
list-style:none;
display:flex;
}
</style>
</head>
<body>
<formaction="">
<ul>
<li>
西瓜<inputtype="checkbox">
</li>
<li>
蘋果<inputtype="checkbox">
</li>
<li>
葡萄<inputtype="checkbox">
</li>
<li>
榴蓮<inputtype="checkbox">
</li>
</ul>
<inputtype="button"value="全選"id="all_btn">
<inputtype="button"value="全不選"id="notall_btn">
<inputtype="button"value="反選"id="invert">
</form>
<script>
letall_btn=document.getElementById("all_btn");
letnotall_btn=document.getElementById("notall_btn");
letinvert=document.getElementById("invert");
letcheck=document.querySelectorAll(`input[type="checkbox"]`);
all_btn.onclick=function(){
check.forEach((item)=>{
item.checked=true;
})
};
notall_btn.onclick=function(){
check.forEach((item)=>{
item.checked=false;
})
};
invert.onclick=function(){
check.forEach((item)=>{
//item.checked?item.checked=true:item.checked=false;
item.checked=!item.checked;
})
};
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的前端学习笔记之多选框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 那达慕大会是哪个民族的节日（那达慕的来历
- 下一篇： 幼儿园开学寄语简短的（幼师新学期寄语）