提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS方法 使用 设置 按钮 dom 复选框 下拉菜单
2023-06-13 09:15:41 时间

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

1.设置单选按钮

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

先贴上一个例子：

复制代码代码如下:
<scripttype="text/javascript">
   functiongetChoice(){
 varoForm=document.forms["uForm1"];
 varaChoices=oForm.camera;
 for(i=0;i<aChoices.length;i++)//遍历整个单选项表
    if(aChoices[i].checked)//如果发现了被选中项则退出
  break;
 alert("相机品牌是："+aChoices[i].value);
   }

   functionsetChoice(iNum){
 varoForm=document.forms["uForm1"];
 oForm.camera[iNum].checked=true;
   }
</script>
<formmethod="post"name="uForm1"action="addInfo.aspx">
   相机品牌：
   <p>
 <inputtype="radio"name="camera"id="canon"value="Canon">
 <labelfor="canon">Canon</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="nikon"value="Nikon">
 <labelfor="nikon">Nikon</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="sony"value="Sony"checked>
 <labelfor="sony">Sony</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="olympus"value="Olympus">
 <labelfor="olympus">Olympus</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="samsung"value="Samsung">
 <labelfor="samsung">Samsung</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="pentax"value="Pentax">
 <labelfor="pentax">Pentax</label>
   </p>
   <p>
 <inputtype="radio"name="camera"id="others"value="其它">
 <labelfor="others">others</label>
   </p>
   <p>
 <inputtype="submit"name="btnSubmit"id="btnSubmit"value="Submit"class="btn">
   </p>
   <p>
 <inputtype="button"value="检测选中对象"onclick="getChoice();">
 <inputtype="button"value="设置为Canon"onclick="setChoice(0);">
   </p>
</form>

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

其中代码中：检查被选中对象的代码是（当某一项的chcked值为ture时，遍历结束）

复制代码代码如下:
varoForm=document.forms["uForm1"];
varaChoices=oForm.camera;
for(i=0;i<aChoices.length;i++)//遍历整个单选项表
   if(aChoices[i].checked)//如果发现了被选中项则退出
 break;
alert("相机品牌是："+aChoices[i].value);

2.设置多选框

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

复制代码代码如下:<scripttype="text/javascript">
   functioncheckbox(){
 varstr=document.getElementsByName("hobby");
 varobjarray=str.length;
 varchestr="";
 
 for(j=0;j<objarray;j++){
    if(str[j].checked==true){
  chestr+=str[j].value+",";
    }
 }
 if(chestr==""){
    alert("请先选择一个爱好～！");
 }else{
    alert("您先择的是："+chestr);
 }
   }

   functionchangeBoxes(action){
 varoForm=document.forms["myForm1"];
 varoCheckBox=oForm.hobby;       
 for(vari=0;i<oCheckBox.length;i++)//遍历每一个选项
    if(action<0)//反选
  oCheckBox[i].checked=!oCheckBox[i].checked;
    else//action为1是则全选，为0时则全不选
  oCheckBox[i].checked=action;
   }
</script>

<formmethod="post"name="myForm1"action="addInfo.aspx">
   喜欢做的事：
   <p>
 <inputtype="checkbox"name="hobby"id="ball"value="ball">
 <labelfor="ball">打球</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="TV"value="TV">
 <labelfor="TV">看电视</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="net"value="net">
 <labelfor="net">上网</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="book"value="book">
 <labelfor="book">看书</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="trip"value="trip">
 <labelfor="trip">旅游</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="music"value="music">
 <labelfor="music">音乐</label>
   </p>
   <p>
 <inputtype="checkbox"name="hobby"id="others"value="其它">
 <labelfor="others">其它</label>
   </p>
   <p>
 <inputtype="button"value="全选"onclick="changeBoxes(1);"/>
 <inputtype="button"value="全不选"onclick="changeBoxes(0);"/>
 <inputtype="button"value="反选"onclick="changeBoxes(-1);"/>
 <inputtype="button"value="提交" onclick="checkbox()"/>
   </p>
</form>

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

3.下拉菜单

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

下拉菜单的常用属性：

属性 说明 length 表示选项<option>个数 selected 布尔值，表示<option>是否被选中 SelectedIndex 被选中选项的序列号，如果没有选项被选中则为-1,对于多选下拉菜单而言，返回第一个被选中
的序号，从0开始计数 text 选项的文本 value 选项的值 type 下拉菜单的类型，单选返回select-one,多选返回select-multiple options 获取选项的数组，例如：oSelectBox.options[2]，表示下拉菜单oSelectBox第三项   
①.下拉菜单获取单选值
复制代码代码如下:<scriptlanguage="javascript">
   functioncheckSingle(){
 varoForm=document.forms["myForm1"];
 varoSelectBox=oForm.constellation;
 variChoice=oSelectBox.selectedIndex;//获取选中项
 alert("您选中了"+oSelectBox.options[iChoice].text);
   }
</script>

<formmethod="post"name="myForm1">
   <labelfor="constellation">星座：</label>
   <p>
 <selectid="constellation"name="constellation">
    <optionvalue="Aries"selected="selected">白羊</option>
    <optionvalue="Taurus">金牛</option>
    <optionvalue="Gemini">双子</option>
    <optionvalue="Cancer">巨蟹</option>
    <optionvalue="Leo">狮子</option>
    <optionvalue="Virgo">处女</option>
    <optionvalue="Libra">天秤</option>
    <optionvalue="Scorpio">天蝎</option>
    <optionvalue="Sagittarius">射手</option>
    <optionvalue="Capricorn">摩羯</option>
    <optionvalue="Aquarius">水瓶</option>
    <optionvalue="Pisces">双鱼</option>
 </select>
   </p>
   <inputtype="button"onclick="checkSingle()"value="查看选项"/>
</form>

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

复制代码代码如下:<scripttype="text/javascript">
   functioncheckMultiple(){
 varoForm=document.forms["myForm1"];
 varoSelectBox=oForm.constellation;
 varaChoices=newArray();
 //遍历整个下拉菜单
 for(vari=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected)//如果被选中
  aChoices.push(oSelectBox.options[i].text);//压入到数组中
 alert("您选了："+aChoices.join());//输出结果
   }
</script>

<formmethod="post"name="myForm1">
 <labelfor="constellation">星座：</label>
 <p>
    <selectid="constellation"name="constellation"multiple="multiple"style="height:180px;">
  <optionvalue="Aries">白羊</option>
  <optionvalue="Taurus">金牛</option>
  <optionvalue="Gemini">双子</option>
  <optionvalue="Cancer">巨蟹</option>
  <optionvalue="Leo">狮子</option>
  <optionvalue="Virgo">处女</option>
  <optionvalue="Libra">天秤</option>
  <optionvalue="Scorpio">天蝎</option>
  <optionvalue="Sagittarius">射手</option>
  <optionvalue="Capricorn">摩羯</option>
  <optionvalue="Aquarius">水瓶</option>
  <optionvalue="Pisces">双鱼</option>
    </select>
 </p>
 <inputtype="button"onclick="checkMultiple()"value="查看选项"/>
</form>

③.通用取值（下拉单选和多选的情况）

复制代码代码如下:<scriptlanguage="javascript">
   functiongetSelectValue(Box){
 varoForm=document.forms["myForm1"];
 varoSelectBox=oForm.elements[Box];//根据参数相应的选择下拉菜单
 if(oSelectBox.type=="select-one"){//判断是单选还是多选
    variChoice=oSelectBox.selectedIndex;//获取选中项
    alert("单选，您选中了"+oSelectBox.options[iChoice].text);
 }else{
    varaChoices=newArray();
    //遍历整个下拉菜单
    for(vari=0;i<oSelectBox.options.length;i++)
  if(oSelectBox.options[i].selected)//如果被选中
     aChoices.push(oSelectBox.options[i].text);//压入到数组中
    alert("多选，您选了："+aChoices.join());//输出结果
 }
   }
</script>

<formmethod="post"name="myForm1">
   星座：
   <p>
 <selectid="constellation1"name="constellation1">
    <optionvalue="Aries"selected="selected">白羊</option>
    <optionvalue="Taurus">金牛</option>
    <optionvalue="Gemini">双子</option>
    <optionvalue="Cancer">巨蟹</option>
    <optionvalue="Leo">狮子</option>
    <optionvalue="Virgo">处女</option>
    <optionvalue="Libra">天秤</option>
    <optionvalue="Scorpio">天蝎</option>
    <optionvalue="Sagittarius">射手</option>
    <optionvalue="Capricorn">摩羯</option>
    <optionvalue="Aquarius">水瓶</option>
    <optionvalue="Pisces">双鱼</option>
 </select>
 <inputtype="button"onclick="getSelectValue("constellation1")"value="查看选项"/>
   </p>
   <p>
 <selectid="constellation2"name="constellation2"multiple="multiple"style="height:120px;">
    <optionvalue="Aries">白羊</option>
    <optionvalue="Taurus">金牛</option>
    <optionvalue="Gemini">双子</option>
    <optionvalue="Cancer">巨蟹</option>
    <optionvalue="Leo">狮子</option>
    <optionvalue="Virgo">处女</option>
    <optionvalue="Libra">天秤</option>
    <optionvalue="Scorpio">天蝎</option>
    <optionvalue="Sagittarius">射手</option>
    <optionvalue="Capricorn">摩羯</option>
    <optionvalue="Aquarius">水瓶</option>
    <optionvalue="Pisces">双鱼</option>
 </select>
 <inputtype="button"onclick="getSelectValue("constellation2")"value="查看选项"/>
   </p>
</form>

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

相关文章