龙空技术网

Js基础7:表单元素属性

罗城浪逸 139

前言:

今天你们对“js单选框改变事件”大概比较注重,同学们都需要剖析一些“js单选框改变事件”的相关内容。那么小编同时在网络上汇集了一些对于“js单选框改变事件””的相关资讯,希望同学们能喜欢,我们一起来学习一下吧!

一、封装获取元素的方法

封装思想——函数封装——代码复用

 function get_id(id){     // 这个函数是专门来通过id获取元素     return document.getElementById(id) }  function get_els(parentId, tagName){     // 这个函数是专门来获取某个父标签范围内的某些标签     return get_id(parentId).getElementsByTagName(tagName) }

二、表单元素属性

常用的表单元素包括 input、select、textarea、button等,下面我们学习这些表单元素中常用的属性。

value 用于获取和设置表单元素的内容type 用于获取和设置input标签的类型checked 复选框选中属性(true表示选中, false表示不选中)disabled 用于禁用表单输入或选择操作

需求:点击按钮修改input的类型和内容

html和css代码

 <input type="button" value="按钮" id="btn">

JavaScript代码

 var btnObj = document.getElementById("btn"); btnObj.onclick = function () {     //修改按钮的value属性     //btnObj.value = "我是按钮我被修改了";      this.value = "我是按钮我被修改了";      this.type = "text";      this.id = "btn2";//审查元素看到id也是可以被修改的 }

需求:点击按钮修改单选框的值(性别男改成女)

html和css代码

 <input type="button" value="修改性别" id="btn1"> <input type="radio" name="sex" id="rad0"  checked="checked">男 <input type="radio" name="sex" id="rad1">女 <input type="radio" name="sex" >保密

JavaScript代码

 var btn1 = document.getElementById("btn1"); btn1.onclick = function () {     document.getElementById("rad1").checked = true; }

需求:点击按钮修改复选框的值(选中 #ck1 和 #ck2 )

html和css代码

 <input type="button" value="选择兴趣" id="btn2"/> <input type="checkbox" name="like" />吃饭 <input type="checkbox" name="like" />睡觉 <input type="checkbox" name="like" id="ck1" />打豆豆 <input type="checkbox" name="like" />打篮球 <input type="checkbox" name="like" />打足球 <input type="checkbox" name="like" id="ck2" />敲代码

JavaScript代码

 var btn2 = document.getElementById("btn2"); btn2.onclick = function () {    document.getElementById("ck1").checked = true;    document.getElementById("ck2").checked = true; }

需求:点击按钮禁止文本框输入

html和css代码

 <input type="button" value="禁用文本框" id="btn"> <input type="text" value="文本框" id="txt">

JavaScript代码

 // 需求:点击按钮时,禁用文本框 //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数 var btn = document.getElementById("btn"); btn.onclick = function () {      //根据id获取文本框,设置disabled属性      document.getElementById("txt").disabled = true; }

标签: #js单选框改变事件