洛浦县网站建设,网讯wx1860,做视频的素材怎么下载网站,长沙专业网站建设怎么做由于工作内容原因近期做了一个网页#xff0c;记录下。
需求#xff1a;
写一个如下的页面#xff0c;包括checkbox单选#xff0c;checkbox多选#xff0c;slect#xff0c;text等控件 内容#xff1a; 一、checkbox #xff08;Wlan 开关#xff09;
要求#x…由于工作内容原因近期做了一个网页记录下。
需求
写一个如下的页面包括checkbox单选checkbox多选slecttext等控件 内容 一、checkbox Wlan 开关
要求启用选中时显示其他内容否则隐藏其他内容
td input typecheckbox nametimer_active idtimer_active value1 stylewidth:20px; onchangeshowBlock()/开启
/td
showBlock()目的就是显示和隐藏其他内容。
实现方法
1先要在html框架中将‘启用’和其他内容分开成两个div在第一个div的checkbox上使用οnchangeshowBlock()来隐藏或者显示第二个div
!----------------------------------------第一个div------------------------
td input typecheckbox nametimer_active idtimer_active value1 stylewidth:20px; onchangeshowBlock()/开启
/td
!----------------------------------------第二个div------------------------
div idhidden-block styledisplay:none;
!--wlan 开关--
!--触发时间点--
!--设置周期--
/div
2根据”启用“结果将第二个div进行隐藏或者显示
script
function showBlock(){var tmp_activedocument.getElementById(timer_active).checked;if(truetmp_active)document.getElementById(hidden-block).style.display block;elsedocument.getElementById(hidden-block).style.display none;}/script
二、text 触发时间点
td
input typetext idwlan_timer_time namewlan_timer_time stylewidth:50px; /
/td
三、checkbox 设置周期
要求实现复选功能
3.1基本显示
tr idwlan_timer_week_idtd设置周期/tdtdinput typecheckbox idwlan_timer_week namewlan_timer_week[] value1 /星期一input typecheckbox idwlan_timer_week namewlan_timer_week[] value2 /星期二input typecheckbox idwlan_timer_week namewlan_timer_week[] value3 /星期三input typecheckbox idwlan_timer_week namewlan_timer_week[] value4 /星期四input typecheckbox idwlan_timer_week namewlan_timer_week[] value5 /星期五input typecheckbox idwlan_timer_week namewlan_timer_week[] value6 /星期六input typecheckbox idwlan_timer_week namewlan_timer_week[] value7 /星期日/td
/tr
3.2选中并提交点击另外的确定
//截取了一部分代码
//该函数是点击提交时触发
function wlan_timer_post()
{//定义一个数组复选checkbox一般都是数组$weekday;//wlan_timer_week 是id$arr_timer_week$_POST [wlan_timer_week];$sizecount($arr_timer_week);for( $i0;$i$size;$i ){$weekday.$arr_timer_week[$i];if($i!$size-1){$weekday.,; }}//最终会将选中的星期写成 136的形式。表示选中了周一、周三、周六
}
3.3显示提交后的回显
script languagejavascript//入参 $timer_week 就是刚才提交的数组[1,3,6]var selectwlan_timer_week.$timer_week.;var arrayselectwlan_timer_week.split(,);//为目标数组就是要显示的var testdocument.getElementsByName(wlan_timer_week[])//实现显示for( var i0;icount;i ){test[array[i]];test[array[i]-1].checkedtrue; }/script
