63-操作表单元素

操作表单元素

• value：获取当前输入框中的数据

• 事件：

  • blur：当标签失去焦点时触发的事件
  • focus：当标签聚焦时触发的事件

下拉框

• value：获取当前选中下拉框的值

• 事件：

  • change：当当前选中数据发生变化时触发事件

单选框

let radios = document.querySelectorAll("[name='gender']")
console.log(radios);radios.forEach(element=>{  
// console.log(element);    
element.onclick = function(){      
user.gender=  element.value    
console.log(user);  
    }
})

多选框

let checkboxs = document.querySelectorAll("[name = 'hobby']")
// console.log(checkboxs);
checkboxs.forEach(element=>{   
element.onclick=function(){      
// console.log(element.checked);

//表示当前单选框或多选框的选中状态       
if(element.checked){         
user.hobby.push(element.value)    
}else{          
//删除数据  splice(index,1) indexOf      

//1.找到当前数据位置       
let index =  user.hobby.indexOf(element.value)    

//2.删除        
user.hobby.splice(index,1)    
}      
console.log(user.hobby);   
}
})

• checked：表示当前单选框或多选框的选中状态。返回一个布尔值。

  • true：表示选中
  • false：表示取消