前端开发萌新一枚,分享我在学习中遇到的问题以及解决问题的办法。
目录
掌握
1.本题旨在要求做题人熟练掌握多选框方面知识
2.拥有清晰的思路以及解决办法
一、需求
1.点击全选可以选中所有的选项
2.点击取消可以撤销上一步的操作
3.点击反选可以实现将上一步的操作进行相反的操作
二、题干
如图所示,是比较简单的html代码。
<style>
form{
display: flex;
}
</style>
<body>
<form action="">
<div id="box">
<span>韭菜盒子</span>
<input type="checkbox" name="1" id="ck">
<span>鸡蛋灌饼</span>
<input type="checkbox" name="1" id="ck">
<span>番茄炒蛋</span>
<input type="checkbox" name="1" id="ck">
</div>
<div id="box1">
<input type="button" value="全选" id="Sa">
<input type="button" value="取消" id="cancel">
<input type="button" value="反选" id="Rs">
</div>
</form>
</body>
三、思路
1.通读题干可知解决此题有两种方法,一种是写点击事件来解决,另外一种则是依托事件委托的形式来解决。两种方法皆可。因为在写这道题时,只考虑到了第一种,所以第二种在这里只说思路。
2.第二种则是创建按钮父元素的事件委托,形参处接收的是鼠标的点击事件对象,根据 event.target
的值来进行具体的操作, event.target
获取的就是鼠标点击到的元素,根据if条件来判断点击的是某个按钮,根据按钮来细分操作。
3.而第一种解决办法则是,根据按钮功能的不同来创建不同的点击事件,其中最关键的一点就是判断多选框是否被选中?
4.我们知道,在多选框中有一条属性 checked
可以用来判断单选框多选框的选中问题。
5.获取到所有的input元素,用以判断
6.在我点击了全选时,我box中的所有input按钮应该处于一个选中的状态
7.取消这个也很好理解,取消是取消我上一步的选中操作
8.反选则是将我上一步的操作进行反选。
四、代码
解题代码如下:
<script>
console.log(ck.length);
Sa.onclick = function(){
for(let i = 0; i < ck.length; i++){
ck[i].checked = true;
}
}
cancel.onclick =function(){
for(let i = 0; i < ck.length; i++){
if(ck[i].checked == true){
ck[i].checked = false;
}
}
}
Rs.onclick =function(){
for(let i = 0; i < ck.length; i++){
if(ck[i].checked == true){
ck[i].checked = false;
}else{
ck[i].checked = true;
}
}
}
</script>
总结
本题不难,主要考虑到了事件委托,以及对多选框的选中与否问题,只要仔细思考就可以找到解决办法。