复选框联动

<script language="javascript">
var selItm = new Array(4);
for (i=0; i<4; i++){
    selItm[i] = new Array();
}
selItm[0][0] = new Option("请选择", " ");                    //定义基本选项
selItm[1][0] = new Option("小学数学", "小学数学");
selItm[1][1] = new Option("小学语文", "小学语文");
selItm[1][2] = new Option("小学英语", "小学英语");
selItm[2][0] = new Option("中学数学", "中学数学");
selItm[2][1] = new Option("中学物理", "中学物理");
selItm[2][2] = new Option("中学语文", "中学语文");
selItm[2][3] = new Option("中学英语", "中学英语");
selItm[2][4] = new Option("中学政治", "中学政治");
selItm[3][0] = new Option("大学数学", "大学数学");
selItm[3][1] = new Option("大学物理", "大学物理");
selItm[3][2] = new Option("大学语文", "大学语文");
selItm[3][3] = new Option("大学英语", "大学英语");
selItm[3][4] = new Option("大学政治", "大学政治");
function OnS1Change(x){
    var temp = document.form1.sel12;
    for (i=0;i<selItm[x].length;i++){
            temp.options[i]=new Option(selItm[x][i].text,selItm[x][i].value);    // 实例化对象
    }
    temp.options[0].selected=true;                            //显示菜单1的初始值
}
function OnS2Change(str1,str2){
    if(str1>0){
        switch(str1){                                // 判断身分
            case 1:str1="小学生";break;
            case 2:str1="中学生";break;
            case 3:str1="大学生";break;
        }
        alert("您的身分是:"+str1+"\n您最喜欢的科目是:"+str2);            // 输出 信息
    }
    else
        alert("您没有选择身分");
}
</script>
<form name="form1" method="post" action="">
<label>您的身分是:<select name="sel1" onChange="OnS1Change(this.value)">
<option value="0">请选择</option><option value="1">小学生</option>
<option value="2">中学生</option><option value="3">大学生</option>
</select>您最喜欢的科目:</label>

<label><!--  创建的菜单2-->
<select name="sel12"/></label><label><!--  收集所选择的信息-->
<input type="submit" name="Submit" value="确定" onClick="OnS2Change(sel1.value,sel12.value)">
</label>

</form>
时间: 2024-10-14 00:44:00

复选框联动的相关文章

复选框与全选框的选中状态的联动

类似在网购时在购物车选择商品时的复选框与全选框的联动事件 对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭. 但总算功能还是做出来了,总要多实践才会变熟的.全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后

表单操作-复选框

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单操作-复选框</title> <style> *{margin:0; padding: 0;} li{list-style: none;} .clearfix:before,.clearfix:after{display: table; co

如何根据集合动态构建复选框选择控件

背景:根据列表或集合,构建复选框控件,从中选取若干选项.比如,构建城市选择控件,城市按照字母分组进行展示.再比如,构建学生选择控件,学生按照城市进行分组展示.常作为分部视图使用. 效果图: 如图,城市以红色字体显示,李雷来自北京,同时Lily和Lucy来自纽约. HTML代码如下: 1 <table><tr><td><input type="checkbox" id="checkedAll" onclick="wh

js实现多级复选框的交互

功能介绍 整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级勾选时判断同级兄弟是否都是选中状态,如果选中将父级勾选上:取消勾选时将父级的勾选状态变为false 复选框交互要实现的效果如下: 实现思路说明 1.设计一种方式让我们知道谁是自己的父级谁是自己的子级.我是用的<input>的name和id值标识的.子级的name值等于父级的id值 2.checkone

微信小程序-自定义复选框

功能: 1.需要多选复选框,并且可以上拉滚动: 2.需要通过名称手写字母排序的,并且可以上拉滚动: 常规的小程序自带的原生picker无法满足我们的要求,因此一些特殊效果需要我们自定义来实现,废话不多说,我们直接看效果: index.wxml布局 <view class="container"> <view class='class bgFFF' bindtap='isDep'> <view class='class-text'> <text

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

HTML页面中A博娱乐复选框的操作方法

A博娱乐复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助. 第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态:反之亦然. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3