单选按钮和复选框属性及说明
属性 | 说明 |
id | 返回或设置单选按钮或复选框的id属性值 |
name | 返回单选按钮或复选框的名称 |
type | 返回单选按钮或复选框的类型 |
value | 返回或设置按钮或复选框的值 |
length | 返回一组单选按钮或复选框中包含元素的个数 |
checked | 返回或设置一个单选按钮或复选框是否处于被选中状态，改属性为true时，单选按钮或复选框处于被选中状态，该属性值为false时，单选按钮或复选框处于未被选中状态 |
disabled | 返回或设置单选按钮或复选框是否处于被禁用，改属性为true时禁用单选按钮或复选框，改属性为false时启用单选按钮或复选框 |
如果在一个单选按钮组中有多个选项设置了checked属性，那么只有最后一个设置了checked属性的选项被选中
单选按钮和复选框的方法
方法 | 说明 |
blur() | 该方法用于将焦点从单选按钮或复选框中移开 |
focus() | 该方法用于将焦点赋给单选按钮或复选框 |
click() | 该方法可以模拟单选按钮或复选框被鼠标单击 |
下拉菜单的属性
<select>和<option>标记实现
属性 | 说明 |
id | 返回或设置下拉菜单的id属性值 |
name | 返回下拉菜单的名称 |
type | 返回下拉菜单的类型 |
value | 返回下拉菜单的值 |
multiple | 该值设置为true时，下拉菜单中的选项会以列表的方式显示，此时可以进行多选，该值设置为false时，只能进行单选 |
length | 返回下拉菜单中的选项个数 |
options | 返回一个数组，数组中的元素为下拉菜单中的选项 |
selectedIndex | 返回或设置下拉菜单中当前选中的选项在options[]数组中的下标 |
disabled | 返回或设置下拉菜单是否被禁用，该属性值为true时，禁用下拉菜单，改属性值为false时启用下拉菜单 |
说明：在可以进行多选的列表框中，按住<Ctrl>键就可以实现多个选项的功能。
下拉菜单的方法
方法 | 说明 |
blur() | 该方法用于将焦点从下拉菜单中移开 |
focus() | 该方法用于将焦点赋值给下拉菜单 |
click() | 该方法可以模拟下拉菜单被鼠标单击 |
remove(i) | 该方法可以删除下拉菜单中的选项 |
Option对象
Option对象常用的属性及说明
方法 | 说明 |
defaultSelected | 该属性为一个布尔值，用于声明在创建该Option对象时，该选项是否是默认选项 |
index | 返回当先Option对象在options[]数组中的下标 |
selected | 返回或设置当前Option对象是否被选中，在该值为true时，当前Option对象为被选中状态，该值为false时，当前Option对象为未被选中状态 |
text | 返回或设置选项中的文字 |
value | 返回或设置选项中的值 |
<!--获取单选钮和复选框的值
将name属性值相同的单选按钮或复选框都放在一个数组中，
这样就可以对某个单选按钮或复选框组进行操作。
通过for循环语句和单选按钮或复选框的checked属性就可以获取用户选择的单选按钮或复选框的值。-->
//获取用户个人信息
<table>
<form name="information" method="post" action="向上滚动的菜单.html" οnsubmit="return getInfo()" >
<tr><td colspan="2">请输入你的个人信息</td></tr>
<tr><td>姓名：</td><td><input name="name" type="text"/></td></tr>
<tr><td>性别：</td><td><input name="sex" type="radio" value="男"/>男<input name="sex" type="radio" value="女"/>女</td></tr>
<tr><td>爱好：</td>
<td><input name="hobbies" type="checkbox"value="看电影"/>看电影<input name="hobbies" type="checkbox"value="听音乐"/>听音乐
<input name="hobbies" type="checkbox"value="演奏乐曲"/>演奏乐曲<input name="hobbies" type="checkbox"value="打篮球" />打篮球
<input name="hobbies" type="checkbox"value="看书"/>看书<input name="hobbies" type="checkbox"value="上网" />上网
</td>
</tr>
<tr><td>自我评价</td><td><textarea name="mark" cols="25" rows="10"></textarea></td></tr>
<tr><td></td><td><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr>
</form>
<script>
function getInfo(){
var xinxi="";
xinxi+="姓名"+name+"\n性别：";
for(i=0;i<information.sex.length;i++)
{
if(information.sex[i].checked)
{
xinxi+=information.sex[i].value;
}
}
xinxi+="\n爱好：";
for(i=0;i<information.hobbies.length;i++)
{
if(information.hobbies[i].checked)
{
xinxi+=information.hobbies[i].value;
}
}
xinxi+="\n自我评价："+information.mark.value;
alert(xinxi);
}
</script>
</table>
---------------------------------------------------------------------------------------------------
<h3>模拟查询电话和流量功能</h3>
<ul>
<form name="chaxun" method="post" action="" οnsubmit=" return search()">
<li>
<label>选择查询类别：</label><input name="leibie" type="radio" value="huafei" />话费
<input name="leibie" type="radio" value="liuliang" />流量
</li>
<li><input type="submit"value="查询" /></li>
</form>
</ul>
<script>
function search()
{
if(chaxun.leibie[0].checked){alert("您的话费余额为6.66元");}
if(chaxun.leibie[1].checked){alert("您的流量余额为1.66G")}
}
</script>
----------------------------------------------------------------------------------------------------------
<h3>模拟学生自主选课</h3>
<table>
<form name="xuanke" method="post" action="">
<tr><td >
<input name="ke" type="checkbox" value="C语言"/>C语言<br>
<input name="ke" type="checkbox" value="机械制图"/>机械制图<br>
<input name="ke" type="checkbox" value="单机片"/>单机片<br>
<input name="ke" type="checkbox" value="自主控制"/>自主控制<br>
<input name="ke" type="checkbox" value="传感器"/>传感器<br>
</td><td>
<input name="ke" type="checkbox" value="高等数学"/>高等数学<br>
<input name="ke" type="checkbox" value="计算机基础"/>计算机基础<br>
<input name="ke" type="checkbox" value="Oracle数据库"/>Oracle数据库<br>
<input name="ke" type="checkbox" value="商务英语"/>商务英语<br>
<input name="ke" type="checkbox" value="PLC设计基础"/>PLC设计基础<br>
</td></tr>
<tr><td><input type="button" value="确定" οnclick="queding()"/></td></tr>
</form>
</table>
<script>
function queding(){
var kemu="";
var z=0;//初始化选课的数目
for(i=0;i<xuanke.ke.length;i++)
{
if(xuanke.ke[i].checked){
kemu+=xuanke.ke[i].value+"\n";
z++;
}
}
if(z>6){
alert("您最多可以选择6门课程")
}
else{alert(kemu);}
}
</script>
------------------------------------------------------------------------------------------------------
<form name="myform">
<table>
<tr>
<td>可选值为</td>
<td></td>
<td>已选职位</td>
</tr>
<tr>
<td>
<!-- size相当于占位符，multiple多选，在可以进行多选按钮的列表框中，按住<ctrl>键就可以实现选择多个选项的功能-->
<select name="job" size="6" multiple="multiple"><option value="歌手">歌手</option>
<option value="演员">演员</option>
<option value="画家">画家</option>
<option value="教师">教师</option>
<option value="公务员">公务员</option>
<option value="职员">职员</option>
</select>
</td>
<td>
<input type="button" value="》" οnclick="myjob0()"/>
<input type="button" value="《" οnclick="tojob0()"/>
</td>
<td><select name="myjob" size="6" multiple="multiple">
</select>
</td>
</tr>
</table>
</form>
<script>
function myjob0()
{
//for(i=0;i<myform.job.length;i++)正序循环会导致
// （i=0）第一次遍历 //<option value="歌手">歌手</option>for循环过第一个后，就不会再遍历下标为0的元素了，而会开始遍历下标为1的元素，而在函数中第一次遍历时，执行了remove(i);数组中的元素就少了一个，这时原来下标为1的元素就变成了下标为0的元素，再进行遍历1时，就会遍历原来下标为2的元素，这样就导致了隔元素遍历，遍历3次后，就遍历不到元素了
// <option value="演员">演员</option>
// （i=1）第二次遍历 //<option value="画家">画家</option>
// <option value="教师">教师</option>
// （i=2）第三次遍历 // <option value="公务员">公务员</option>
// <option value="职员">职员</option>
for(i=myform.job.length-1;i>-1;i--)//倒序会根据原有的顺序遍历
{
if(myform.job[i].selected)
{
//Option也是一个对象，可以直接进行创建
var myoption=new Option(myform.job[i].text,myform.job[i].value);
//myform.myjob.appendChild(myoption);
myform.myjob.options[myform.myjob.options.length]=myoption;//[myform.myjob.options.length]为了每添加一个元素都在下面
myform.job.remove(i);
}
}
}
function tojob0()
{
for(i=myform.myjob.length-1;i>-1;i--)
{
if(myform.myjob[i].selected)
{
var option2=new Option(myform.myjob[i].text,myform.myjob[i].value);
myform.job.options[myform.job.options.length]=option2;//[myform.job.options.length]为了防止替换原来数组的下标
//myform.job.appendChild(option2);
myform.myjob.remove(i);
}
}
}
</script>
-------------------------------------------------------------------------------------
<h3>将数组中的数据添加到下拉菜单中</h3>
<form name="lianxi">
<select name="menu" style="width: 200px;"></select>
</form>
<script>
var option1=new Option("Javascript与PHP");
var option2=new Option("Javascript与JSP");
var option3=new Option("javascript与ASP.NET");
var option4=new Option("javascript与ASP");
lianxi.menu.options[0]=option1;
lianxi.menu.options[1]=option2;
lianxi.menu.options[2]=option3;
lianxi.menu.options[3]=option4;
</script>
--------------------------------------------------------------------------------------
<!--在商品信息添加页面制作一个二级联动菜单，通过二级联动菜单选择商品的所属类别，当第一个菜单选项改变时，第二个菜单中的选项也会随之改变-->
<table>
<form name="shop">
<tr><td>所属类别：</td><td><select name="leibie" οnchange="xingneng()" >
<option>家用电器</option>
<option>电视机</option>
<option>电冰箱</option>
</select></td></tr>
<tr>
<td>商品名称：</td>
<td><input type="text" name="shopname" /></td>
<tr>
<td>会员价：</td>
<td><input type="text" name="price" id="price" value="" /></td>
</tr>
</tr>
<tr>
<td>提供厂商：</td>
<td><input type="text" name="changjia" /></td>
</tr>
<tr>
<td>商品简介：</td>
<td><textarea name="jianjie" rows="10" cols="20"></textarea></td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="text" name="shuliang"/></td>
</tr>
<tr><td colspan="2">
<input type="button" value="添加" />
<input type="button" value="重置" /></td>
</tr>
</form>
</table>
<script>
function xingneng()
{
if(shop.leibie[2].selected)
{
shop.shopname.value="海尔BCD-258W";
shop.price.value="2289";
shop.changjia.value="海尔集团";
shop.jianjie.value="三开门搞，风冷无霜";
shop.shuliang.value="10";
}
if(shop.leibie[1].selected){
shop.shopname.value="长虹电视机";
shop.price.value="2600";
shop.changjia.value="长虹集团";
shop.jianjie.value="高清，数字电视";
shop.shuliang.value="26";
}
}
</script>
2556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
