您的位置：首页 > Web前端 > JavaScript

Javascript通过单选、复选、下拉列表获取数据

2013-12-06 17:46 507 查看

javascript不仅可以取得文本的输入内容，也可以去的单选按钮或者复选框的输入内容。由于单选框的value可能是一样的，所以可以采用数组的行使分别判断哪个控件被选中。如性别的选择。复选框也是可以通过循环的方式取出每一个被选中的内容，选择个人兴趣(多选)

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js操作单选按钮跟复选框</title>

<script language="javascript" type="text/javascript">

function show(){

  var sex;

  if(document.myform.sex[0].checked){

   sex=document.myform.sex[0].value;

  }else{

   sex=document.myform.sex[1].value;

  }

  alert("性别："+sex);



  var interest="";

  for(i=0;i<document.myform.inst.length;i++){

   if(document.myform.inst[i].checked){

    interest+=document.myform.inst[i].value+"---";

    }

   }

   alert("兴趣："+interest);

}

</script>

</head>

<body>

<form action="" method="post" name="myform">

    性别：<input type="radio" name="sex" value="男" checked="checked" />男

    <input type="radio" name="sex" value="女" />女<br />



    兴趣：<input type="checkbox" name="inst" value="sing" />唱歌

    <input type="checkbox" name="inst" value="dance" />跳舞

    <input type="checkbox" name="inst" value="read" />阅读

    <input type="checkbox" name="inst" value="sleep" />睡觉<br />

    <input type="button" value="显示" onclick="show()" />

    </form>

</body>

</html>

对于下拉列表的话，可以用过onChange来对事件进行调用。

script部分：

<script language="javascript">

function show(val){

  document.myform.result.value=val;

}

</script>

HTML部分：

<form action="" method="post" name="myform">

    学科：<select name="dept" onchange="show(this.value)">

       <option value="语文">语文</option>

                <option value="数学">数学</option>

                <option value="英语">英语</option>

                <option value="物理">物理</option>

    </select>

    结果：<input type="text" name="result" value="" />

</form>

额，这个的结果显示出来好像如果第一次选择语文的时候不行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航