Js表单元素属性
- value：用于大部分表单的内容获取。
- type：可以获取input标签的类型（输入框/复选框）。
- disabled：禁用属性
- checked：复选框选中属性
- selected：下拉框选中属性
其中disabled会被转为布尔类型。
一、获取下拉框随机值
<input type="button" value="选择" id="btn">
<br>
<select id="food">
<option>烤肉</option>
<option>拉面</option>
<option>小龙虾</option>
<option>火锅</option>
<option>外卖</option>
<option>麻辣烫</option>
</select>
<script>
// 获取元素
var btn = document.getElementById("btn");
var food = document.getElementById("food");
var opts = food.getElementsByTagName("option");
// 添加按钮的点击事件
btn.onclick = function(){
// 获取ops数组的随机下标
var n = Math.floor(Math.random() * opts.length);
console.log(n);
// 设置对应随机数的属性为选中状态
opts[n].selected = true;
}
</script>
二、输入框获取焦点
使用onfocus来获取文本框的焦点。
使用onblur来失去焦点。
三、全选与反选
<table>
<thead>
<tr>
<th><input type="checkbox" id="all"></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>inphone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>inphone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>inphone8</td>
<td>8000</td>
</tr>
</tbody>
</table>
<input type="button" id="btn" value="反选"/>全选：首先获取全选按钮元素，获取全部的子复选框。然后让每个子选项的checked值保持与全选按钮的checked一致；
子元素判断全选按钮是否要被选中：首先遍历所有子选项，给子选项添加点击事件，判断是否有子选项没有被选中，如果都选中就让全选为选中状态；
反选：给反选按钮添加点击事件，遍历子选项，让选中的进行取反，然后判断子选项是否都被选中，是的话全选也要选中。
<script>
// 获取元素
var all = document.getElementById("all");
var tb = document.getElementById("tb");
var tb_input = tb.getElementsByTagName("input");
// 全选
// 添加点击事件
all.onclick = function(){
// 遍历子元素
for(var i = 0;i < tb_input.length;i++){
tb_input[i].checked = all.checked;
}
}
// 点击一个子元素判断全选按钮是否要被选中
// 首先循环遍历所有的子元素
for(var i = 0;i < tb_input.length;i++){
// 其次给每一个子元素添加点击事件
tb_input[i].onclick = function(){
allChecked();
}
}
//反选
btn.onclick = function(){
for(var i = 0;i < tb_input.length; i++){
tb_input[i].checked = !tb_input[i].checked;
}
allChecked();
}
// 是否被选中的函数
function allChecked(){
// 定义一个变量,让他为true
var isChecked = true;
// 判断是否有子元素没有被选中
for(var j = 0;j < tb_input.length ;j++){
if(tb_input[j].checked == false){;
isChecked = false;
break;
}
}
all.checked = isChecked;
}
</script>网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
相关文章
-
[网页编程]-21 JavaScript 表单属性补充
2023-12-27
67444 浏览
readonly和disabled共同的特点:可以看到数据，但是不可以操作数据不同:readonly(只读):里面的数据是可以提交到后台disabled(不可用):数据无法提交到后台代码
-
[网页编程]-22 JavaScript 表单校验02 多情况校验实操
2023-12-27
66442 浏览
首先是要完成的校验功能基础页面代码
注册页面
- 如何判断对象里有某个属性 2023-12-26 65107 浏览
constd={};Object.defineProperties(d,{name:{value:"Locky",writable:false,enumerable:false,configurable:false,},})in缺点：可以拿到原型上的属性和方法'age'ind➡️false'name'ind➡️true'valueOf'ind➡️truehasOwnPropertyd.hasOwn
- [网页编程]-07 jQuery 操作页面元素属性 2023-12-27 64087 浏览
本篇介绍获取和操作页面元素属性在jq语法中使用attr()方法操作页面元素的属性。如果只写一个值jq.attr('class')则代表获取该对象class的属性值，如果写两个值jq.attr('class','bigBox')则代表设置该对象class的属性值。获取页面元素对象属性获得元素对象的属性jq对象.attr('属性名');.获取页面元素属性值获得文本框实时输入的值jq对象.val();完
- [网页编程]-05 jQuery 表单选择器 2023-12-27 65833 浏览
表单选择器基本上是获取表单内的元素或者是标签对象.但是要注意前面加冒号和不加去区别,加了就是获得form表单中的所有表单项不加就是获得标签名是input的所有标签对象如果说需要获取属性后面的内容对象,就可以使用冒号属性内容如果是要获取密码框的对象,就可以这样写$(":password")基本上所有表单属性通用
- [网页编程]-04 jQuery 属性选择器 2023-12-27 64687 浏览
jQuery的属性选择器区别于JavaScript核心代码$(function(){//更改type属性为text的背景颜色//$("input[type=text]").css("background-color","red");//更改name属性以z开头的背景颜色//$("input[name^=z]").css("background-color","yellow");//更改name属性
- [网页编程]-17 JavaScript Document节点对象的属性操作 2023-12-27 67041 浏览
直接操作元索的属性通过元素名.属性名='值'通过操作元素属性的方法元素名setAttribute或元素名.getAttribute("属性',值)
- [网页编程]-14 JavaScript Bom对象中常用属性 2023-12-27 66070 浏览
Navigator返回由客户机发送到服务器的user-agent的头部信息(用户代理对象)判断是移动端还是PC端Locationurl:查看地址href:查看主机地址hostname:主机地址port:端口号
- 统一删除或过滤数组中的每一项对象的指定属性 2023-12-26 66216 浏览
需求描述有一数组，数组中的每一项放置的是一个个的对象，结构如下：letarr=[{name:"孙悟空",age:500,home:"花果山"},{name:"猪八戒",age:88,home:"高老庄"},{name:"沙和尚",age:1000,home:"通天河"},]想加工数据以后，使得每一项的home属性都不要，只留name和age属性。方式一（map映射，指定属性不映射过去）letnew
- [网页编程]-22 JavaScript 表单校验01 简单校验 2023-12-27 63521 浏览
1.需求:实现提交内容校验,空值提示错误(onsubmit)使用form中的onsubmit属性实现,主要是如果提交数据为空,不做参数传递注意点:需要给onsubmit属性提供返回值才能完成判断代码:
- 上周热门
- 银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示 1507
- 银河麒麟打印带有图像的文档时出错 1426
- 银河麒麟添加打印机时，出现“server-error-internal-error” 1217
- 统信操作系统各版本介绍 1137
- 统信桌面专业版【如何查询系统安装时间】 1134
- 统信桌面专业版【全盘安装UOS系统】介绍 1090
- 麒麟系统也能完整体验微信啦！ 1046
- 统信【启动盘制作工具】使用介绍 698
- 统信桌面专业版【一个U盘做多个系统启动盘】的方法 639
- 信刻全自动档案蓝光光盘检测一体机 545
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 信创开放社区邀请他人注册的具体步骤如下 15
- 如何玩转信创开放社区—从小白进阶到专家 15
- 方德桌面操作系统 14
- 我有15积分有什么用? 13
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多-
关注我们
扫一扫关注公众号
添加我为好友，拉您入交流群！
添加我为好友，拉您入交流群！
请使用微信扫一扫!
- 如何判断对象里有某个属性 2023-12-26 65107 浏览