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复制对象使用说明
Jun 28 Javascript
js数组操作学习总结
Nov 04 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
详解React 的几种条件渲染以及选择
Oct 23 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服务器页面间跳转实现方法
2012/08/02 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
jquery 插件开发备注
2010/08/27 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Python对象体系深入分析
2014/10/28 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
中英文求职信范文
2014/01/27 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年司法所工作总结
2015/04/27 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
2019年入党思想汇报
2019/03/25 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript