一次web网页设计实践——checkbox单选、复选功能的实现

由于工作内容原因近期做了一个网页,记录下。

需求:

写一个如下的页面,包括checkbox单选,checkbox多选,slect,text等控件

内容:

 一、checkbox (Wlan 开关)

要求:启用选中时,显示其他内容;否则隐藏其他内容

<td > 				<input type="checkbox" name="timer_active" id="timer_active" value="1"  style="width:20px;" onchange="showBlock()"/>开启							
</td>

showBlock()目的就是显示和隐藏其他内容。

实现方法:

1,先要在html框架中将‘启用’和其他内容分开成两个div:在第一个div的checkbox上使用οnchange="showBlock()",来隐藏或者显示第二个div

<!----------------------------------------第一个div------------------------>
<td > 				<input type="checkbox" name="timer_active" id="timer_active" value="1"  style="width:20px;" onchange="showBlock()"/>开启							
</td>
<!----------------------------------------第二个div------------------------>
<div id="hidden-block" style="display:none;">
<!--wlan 开关-->
<!--触发时间点-->
<!--设置周期-->
</div>

2,根据”启用“结果将第二个div进行隐藏或者显示

<script>
function showBlock(){var tmp_active=document.getElementById("timer_active").checked;if(true==tmp_active)document.getElementById("hidden-block").style.display = "block";elsedocument.getElementById("hidden-block").style.display = "none";}</script>

二、text (触发时间点)

<td>
<input type="text" id="wlan_timer_time" name="wlan_timer_time" style="width:50px;" />	
</td>

三、checkbox (设置周期)

要求:实现复选功能

3.1基本显示

<tr id="wlan_timer_week_id"><td>设置周期</td><td><input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="1" />星期一<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="2" />星期二<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="3" />星期三<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="4" />星期四<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="5" />星期五<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="6" />星期六<input type="checkbox" id="wlan_timer_week" name="wlan_timer_week[]" value="7" />星期日</td>
</tr>

3.2选中并提交(点击另外的确定)

//截取了一部分代码
//该函数是点击提交时触发
function wlan_timer_post() 
{//定义一个数组,复选checkbox一般都是数组$weekday="";//wlan_timer_week 是id$arr_timer_week=$_POST ['wlan_timer_week'];$size=count($arr_timer_week);for( $i=0;$i<$size;$i++ ){$weekday.=$arr_timer_week[$i];if($i!=$size-1){$weekday.=",";	}}//最终会将选中的星期写成 1,3,6的形式。表示选中了周一、周三、周六
}

3.3显示(提交后的回显)

<script language="javascript">//入参 $timer_week 就是刚才提交的数组[1,3,6]var selectwlan_timer_week="'.$timer_week.'";var array=selectwlan_timer_week.split(",");//为目标数组,就是要显示的var test=document.getElementsByName("wlan_timer_week[]")//实现显示for( var i=0;i<count;i++ ){test[array[i]];test[array[i]-1].checked=true;	}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

只需十四步,从零开始掌握Python机器学习

推荐阅读&#xff08;点击标题查看&#xff09; 1、Python 数据挖掘与机器学习实践技术应用 2、R-Meta分析与【文献计量分析、贝叶斯、机器学习等】多技术融合实践与拓展 3、最新基于MATLAB 2023a的机器学习、深度学习 4、【八天】“全面助力AI科研、教学与实践技能”夏令营…

Linux安装redis执行make命令报错:gcc not found和*** [adlist.o] Error 1

目录 第一章、问题分析与解决1.1&#xff09;报错11.2&#xff09;报错2 友情提醒 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置。 第一章、问题分析与解决 1.1&#xff09;报错1 报错问题1&#xff1a;gcc: Command n…

python项目开发案例集锦,python项目案例代码

这篇文章主要介绍了python项目开发案例集锦(全彩版)&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 前言 22个通过Python构建的项目&#xff0c;以此来学习Python编程。 ① 骰…

变透明的黑匣子:UCLA 开发可解释神经网络 SNN 预测山体滑坡

内容一览&#xff1a;由于涉及到多种时空变化因素&#xff0c;山体滑坡预测一直以来都非常困难。深度神经网络 (DNN) 可以提高预测准确性&#xff0c;但其本身并不具备可解释性。本文中&#xff0c;UCLA 研究人员引入了 SNN。SNN 具有完全可解释性、高准确性、高泛化能力和低模…

vue3+ts+pinia整合websocket

文章目录 一. 目标二. 前置环境三. websocket通用模板 一. 目标 先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合. 选择websocket长连接通讯. 使用pinia原因是pinia具备共享数据性质.可以作为消息队列缓存数据,降低渲染压力.同时方便多…

一元三次方程求解

一元三次方程求解 题目描述提示输入输出格式输入格式输出格式 输入输出样例输入样例输出样例 算法分析A C 代码 题目描述 有形如&#xff1a; a x 3 b x 2 c x d 0 ax^3bx^2c^xd0 ax3bx2cxd0一元三次方程。给出该方程中各项的系数 ( a a a&#xff0c; b b b&#xff0c;…

P2141 [NOIP2014 普及组] 珠心算测验

题目背景 NOIP2014 普及 T1 题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术。珠心算训练&#xff0c;既能够开发智力&#xff0c;又能够为日常生活带来很多便利&#xff0c;因而在很多学校得到普及。 某学校的珠心算老师采用一种快速考察珠心算…

无限遍历,Python实现在多维嵌套字典、列表、元组的JSON中获取数据

目录 背景 思路 新建两个函数A和B&#xff0c;函数 A处理字典数据&#xff0c;被调用后&#xff0c;判断传递的参数&#xff0c;如果参数为字典&#xff0c;则调用自身&#xff1b; 如果是列表或者元组&#xff0c;则调用列表处理函数B&#xff1b; 函数 B处理列表&#x…

TabR:检索增强能否让深度学习在表格数据上超过梯度增强模型?

这是一篇7月新发布的论文&#xff0c;他提出了使用自然语言处理的检索增强Retrieval Augmented技术&#xff0c;目的是让深度学习在表格数据上超过梯度增强模型。 检索增强一直是NLP中研究的一个方向&#xff0c;但是引入了检索增强的表格深度学习模型在当前实现与非基于检索的…

MySQL的使用——【初识MySQL】第二节

MySQL的使用——【初识MySQL】第二节 文章目录 MySQL环境变量的配置&#xff08;如使用Navicat可忽略&#xff09;使用命令行连接MySQL&#xff08;如使用Navicat可忽略&#xff09;步骤注意 NavicatNavicat的下载Navicat的使用连接MySQL新建表 总结总结 MySQL环境变量的配置&a…

SpringCloudAlibaba之Nacos服务的发现与注册中心(二)配置

在nacos中的雪崩保护 和阈值&#xff08;0~1&#xff09;与spring.cloud.nacos.discovery.ephemeral这个配置有关 ephemeral为false&#xff0c;永久实例 epheme为true&#xff0c;临时实例&#xff08;默认&#xff09; 健康实例数/总实例数<保护阈值的时候&#xff0c;…

【秋招】算法岗的八股文之机器学习

目录 机器学习特征工程常见的计算模型总览线性回归模型与逻辑回归模型线性回归模型逻辑回归模型区别 朴素贝叶斯分类器模型 (Naive Bayes)决策树模型随机森林模型支持向量机模型 (Support Vector Machine)K近邻模型神经网络模型卷积神经网络&#xff08;CNN&#xff09;循环神经…

Redis中缓存穿透、击穿、雪崩以及解决方案

Redis中缓存穿透、击穿、雪崩以及解决方案 Redis作为一个高效的内存数据库&#xff0c;提供了缓存能力使得我们能够快速访问数据。然而&#xff0c;在使用Redis作为缓存时&#xff0c;我们可能会面临缓存穿透、缓存击穿和缓存雪崩的问题。接下来&#xff0c;我将详细解释这些现…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 3

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

Stable Diffusion:网页版 体验 / AI 绘图

一、官网地址 Stable Diffusion Online 二、Stable Diffusion AI 能做什么 Stable Diffusion AI绘图是一种基于Stable Diffusion模型的生成式AI技术&#xff0c;能够生成各种类型的图像&#xff0c;包括数字艺术、照片增强和图像修复等。以下是一些可能的应用&#xff1a; …

AX7A200教程(8): HDMI输入和输出显示1080p视频

文章目录 本章节主要将hdmi输入的1080p视频通过ddr3缓存&#xff0c;然后通过hdmi输出口输出到显示屏上显示 一&#xff0c; 突发读写命令 设置读写突发长度为64 //parameter defineparameter WRITE_LENGTH 64;parameter READ_LENGTH 64;parameter IDLE 3d0; …

C#实现结构体与字节流的相互转化

unity项目中&#xff0c;涉及到与C的相互通信&#xff0c;而通信接口为C封好的动态库。所以&#xff0c;传输信息时&#xff0c;需要向C端发送字节流信息。 对此&#xff0c;需将结构体数据转为字节流&#xff0c;其代码如下&#xff1a; public static byte[] StructToBytes(…

如何用DHTMLX组件为Web应用创建甘特图?(二)

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求&#xff0c;是最完善的甘特图图表库。甘特图仍然是项目管理应用程序中最需要的工具之一&#xff0c;DHTMLX Gantt组件提供了能提升研发甘特图功能所需的重要工具。 在这篇…

Kotlin基础(十):函数进阶

前言 本文主要讲解kotlin函数&#xff0c;之前系列文章中提到过函数&#xff0c;本文是kotlin函数的进阶内容。 Kotlin文章列表 Kotlin文章列表: 点击此处跳转查看 目录 1.1 函数基本用法 Kotlin 是一种现代的静态类型编程语言&#xff0c;它在函数的定义和使用上有一些特点…

什么是互斥锁?怎么运用互斥锁?

1、什么是互斥锁&#xff1f; 互斥锁是&#xff08;Mutex&#xff09;是一种用于多线程编程的同步原语&#xff0c;用于确保在多个线程访问共享资源时的互斥性。 在多线程环境中&#xff0c;当多个线程同时访问共享资源时&#xff0c;可能会导致数据的竞争和不一致问题。为了…