js使用DOM设置单选按钮、复选框及下拉菜单的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:

1.设置单选按钮

单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.

先贴上一个例子:

<script type="text/javascript">

    function getChoice() {

 var oForm = document.forms["uForm1"];

 var aChoices = oForm.camera;

 for (i = 0; i < aChoices.length; i++) //遍历整个单选项表

     if (aChoices[i].checked) //如果发现了被选中项则退出

  break;

 alert("相机品牌是:" + aChoices[i].value);

    }
    function setChoice(iNum) {

 var oForm = document.forms["uForm1"];

 oForm.camera[iNum].checked = true;

    }

</script>

<form method="post" name="uForm1" action="addInfo.aspx">

    相机品牌:

    <p>

 <input type="radio" name="camera" id="canon" value="Canon">

 <label for="canon">Canon</label>

    </p>

    <p>

 <input type="radio" name="camera" id="nikon" value="Nikon">

 <label for="nikon">Nikon</label>

    </p>

    <p>

 <input type="radio" name="camera" id="sony" value="Sony" checked>

 <label for="sony">Sony</label>

    </p>

    <p>

 <input type="radio" name="camera" id="olympus" value="Olympus">

 <label for="olympus">Olympus</label>

    </p>

    <p>

 <input type="radio" name="camera" id="samsung" value="Samsung">

 <label for="samsung">Samsung</label>

    </p>

    <p>

 <input type="radio" name="camera" id="pentax" value="Pentax">

 <label for="pentax">Pentax</label>

    </p>

    <p>

 <input type="radio" name="camera" id="others" value="其它">

 <label for="others">others</label>

    </p>

    <p>

 <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">

    </p>

    <p>

 <input type="button" value="检测选中对象" onclick="getChoice();">

 <input type="button" value="设置为Canon" onclick="setChoice(0);">

    </p>

</form>

单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.
从以上代码中看出,id和name是不同的,一组单选按钮中它们的name是相同的,只有一个被选中。id则是绑定<label>或者其它选择作用的。

其中代码中:检查被选中对象的代码是(当某一项的chcked值为ture时,遍历结束)

var oForm = document.forms["uForm1"];

var aChoices = oForm.camera;

for (i = 0; i < aChoices.length; i++) //遍历整个单选项表

    if (aChoices[i].checked) //如果发现了被选中项则退出

 break;

alert("相机品牌是:" + aChoices[i].value);

2.设置多选框

与单选按钮不同,复选框<input type="checkbox" />可以同时选中多个选项进行处理,邮箱中每条邮件之前的复选框就的典型的运用

<script type="text/javascript">

    function checkbox() {

 var str = document.getElementsByName("hobby");

 var objarray = str.length;

 var chestr = "";

 

 for (j = 0; j < objarray; j++) {

     if (str[j].checked == true) {

  chestr += str[j].value + ",";

     }

 }

 if (chestr == "") {

     alert("请先选择一个爱好~!");

 } else {

     alert("您先择的是:" + chestr);

 }

    }
    function changeBoxes(action) {

 var oForm = document.forms["myForm1"];

 var oCheckBox = oForm.hobby;        

 for (var i = 0; i < oCheckBox.length; i++) //遍历每一个选项

     if (action < 0) //反选

  oCheckBox[i].checked = !oCheckBox[i].checked;

     else //action为1是则全选,为0时则全不选

  oCheckBox[i].checked = action;

    }

</script>
<form method="post" name="myForm1" action="addInfo.aspx">

    喜欢做的事:

    <p>

 <input type="checkbox" name="hobby" id="ball" value="ball">

 <label for="ball">打球</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="TV" value="TV">

 <label for="TV">看电视</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="net" value="net">

 <label for="net">上网</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="book" value="book">

 <label for="book">看书</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="trip" value="trip">

 <label for="trip">旅游</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="music" value="music">

 <label for="music">音乐</label>

    </p>

    <p>

 <input type="checkbox" name="hobby" id="others" value="其它">

 <label for="others">其它</label>

    </p>

    <p>

 <input type="button" value="全选" onclick="changeBoxes(1);" />

 <input type="button" value="全不选" onclick="changeBoxes(0);" />

 <input type="button" value="反选" onclick="changeBoxes(-1);" />

 <input type="button" value="提交"  onclick="checkbox()" />

    </p>

</form>

复选框原理利用checked属性布尔值进行确定,全选和不全选可以采用0和1的方式传递参数。

3.下拉菜单

下拉菜单<select>是比较常用的表单元素。当它的下拉为单选时,和单选按钮<input type="radio" />功能一样,当下拉菜单为多选时multiple="multiple时,功能相当复选框,但所占面积远小于复选框。

下拉菜单的常用属性:

属性 说明
length 表示选项
selected 布尔值,表示
SelectedIndex 被选中选项的序列号,如果没有选项被选中则为-1,对于多选下拉菜单而言,返回第一个被选中 的序号,从0开始计数
text 选项的文本
value 选项的值
type 下拉菜单的类型,单选返回select-one,多选返回select-multiple
options 获取选项的数组 ,例如:oSelectBox.options[2],表示下拉菜单oSelectBox第三项
  
①. 下拉菜单获取单选值
<script language="javascript">

    function checkSingle() {

 var oForm = document.forms["myForm1"];

 var oSelectBox = oForm.constellation;

 var iChoice = oSelectBox.selectedIndex; //获取选中项

 alert("您选中了" + oSelectBox.options[iChoice].text);

    }

</script>
<form method="post" name="myForm1">

    <label for="constellation">星座:</label>

    <p>

 <select id="constellation" name="constellation" >

     <option value="Aries" selected="selected">白羊</option>

     <option value="Taurus">金牛</option>

     <option value="Gemini">双子</option>

     <option value="Cancer">巨蟹</option>

     <option value="Leo">狮子</option>

     <option value="Virgo">处女</option>

     <option value="Libra">天秤</option>

     <option value="Scorpio">天蝎</option>

     <option value="Sagittarius">射手</option>

     <option value="Capricorn">摩羯</option>

     <option value="Aquarius">水瓶</option>

     <option value="Pisces">双鱼</option>

 </select>

    </p>

    <input type="button" onclick="checkSingle()" value="查看选项" />

</form>

②. 下拉菜单为多选时,取值

<script type="text/javascript">

    function checkMultiple() {

 var oForm = document.forms["myForm1"];

 var oSelectBox = oForm.constellation;

 var aChoices = new Array();

 //遍历整个下拉菜单

 for (var i = 0; i < oSelectBox.options.length; i++)

     if (oSelectBox.options[i].selected) //如果被选中

  aChoices.push(oSelectBox.options[i].text); //压入到数组中

 alert("您选了:" + aChoices.join()); //输出结果

    }

</script>
<form method="post" name="myForm1">

 <label for="constellation">星座:</label>

 <p>

     <select id="constellation" name="constellation" multiple="multiple" style="height:180px;">

  <option value="Aries">白羊</option>

  <option value="Taurus">金牛</option>

  <option value="Gemini">双子</option>

  <option value="Cancer">巨蟹</option>

  <option value="Leo">狮子</option>

  <option value="Virgo">处女</option>

  <option value="Libra">天秤</option>

  <option value="Scorpio">天蝎</option>

  <option value="Sagittarius">射手</option>

  <option value="Capricorn">摩羯</option>

  <option value="Aquarius">水瓶</option>

  <option value="Pisces">双鱼</option>

     </select>

 </p>

 <input type="button" onclick="checkMultiple()" value="查看选项" />

</form>

③. 通用取值(下拉单选和多选的情况)

<script language="javascript">

    function getSelectValue(Box) {

 var oForm = document.forms["myForm1"];

 var oSelectBox = oForm.elements[Box]; //根据参数相应的选择下拉菜单

 if (oSelectBox.type == "select-one") { //判断是单选还是多选

     var iChoice = oSelectBox.selectedIndex; //获取选中项

     alert("单选,您选中了" + oSelectBox.options[iChoice].text);

 } else {

     var aChoices = new Array();

     //遍历整个下拉菜单

     for (var i = 0; i < oSelectBox.options.length; i++)

  if (oSelectBox.options[i].selected) //如果被选中

      aChoices.push(oSelectBox.options[i].text); //压入到数组中

     alert("多选,您选了:" + aChoices.join()); //输出结果

 }

    }

</script>
<form method="post" name="myForm1">

    星座:

    <p>

 <select id="constellation1" name="constellation1">

     <option value="Aries" selected="selected">白羊</option>

     <option value="Taurus">金牛</option>

     <option value="Gemini">双子</option>

     <option value="Cancer">巨蟹</option>

     <option value="Leo">狮子</option>

     <option value="Virgo">处女</option>

     <option value="Libra">天秤</option>

     <option value="Scorpio">天蝎</option>

     <option value="Sagittarius">射手</option>

     <option value="Capricorn">摩羯</option>

     <option value="Aquarius">水瓶</option>

     <option value="Pisces">双鱼</option>

 </select>

 <input type="button" onclick="getSelectValue('constellation1')" value="查看选项" />

    </p>

    <p>

 <select id="constellation2" name="constellation2" multiple="multiple" style="height:120px;">

     <option value="Aries">白羊</option>

     <option value="Taurus">金牛</option>

     <option value="Gemini">双子</option>

     <option value="Cancer">巨蟹</option>

     <option value="Leo">狮子</option>

     <option value="Virgo">处女</option>

     <option value="Libra">天秤</option>

     <option value="Scorpio">天蝎</option>

     <option value="Sagittarius">射手</option>

     <option value="Capricorn">摩羯</option>

     <option value="Aquarius">水瓶</option>

     <option value="Pisces">双鱼</option>

 </select>

 <input type="button" onclick="getSelectValue('constellation2')" value="查看选项" />

    </p>

</form>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
React中的Context应用场景分析
Jun 11 Javascript
DOM基础教程之事件对象
Jan 20 #Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
DOM基础教程之使用DOM + Css
Jan 20 #Javascript
jquery+ajax实现跨域请求的方法
Jan 20 #Javascript
You might like
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
php自动获取关键字的方法
2015/01/06 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
thinkphp分页实现效果
2016/10/13 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python中的默认参数详解
2015/06/24 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
教师推荐信范文
2013/11/24 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
工地安全生产标语
2014/06/06 职场文书
2014年教务工作总结
2014/12/03 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
php访问对象中的成员的实例方法
2021/11/17 PHP