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 相关文章推荐
自动更新作用
Oct 08 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
微信小程序删除处理详解
Aug 16 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
做网页的一些技巧
2007/02/01 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
校友会致辞
2015/07/30 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
pandas进行数据输入和输出的方法详解
2022/03/23 Python