javascript中的select、checkbox

遍历checkbox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" name="sex[]" value='男'/>男
<input type="checkbox" name="sex[]" value='女'/>女
<input type="checkbox" name="sex[]" value='保密'/>保密
<input id="bu1" type="button" value="遍历checkbox"/>
</body>
</html>
<script type="text/javascript">
document.getElementById('bu1').onclick=function(){
    var bL=document.getElementsByName('sex[]');
    for(var i=0;i<bL.length;i++){
        alert(bL[i].value);
        alert(bL[i].checked);
    }
}
</script>

遍历select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
function fun1(){
    var ob=document.getElementsByName('province')[0];
    var oC=ob.options;
    for(var i=0;i<oC.length;i++){
        alert(oC[i].value);
        alert(oC[i].text);
        alert(oC[i].selected);
    }
}
function addCity(){
    //根据province选中的值，来给city追加option
    var ob=document.getElementsByName('province')[0];
    var v=ob.value;//获取被选中的option的value属性值
    var cityOb=document.getElementsByName('city')[0];
    switch(v){
    case '0':
        cityOb.options.length=1;
        cityOb.options[0].value='0';
        cityOb.options[0].text='请选择';
        break;
    case '1':
        cityOb.options.length=3;
        cityOb.options[0].value='0';
        cityOb.options[0].text='请选择';
        cityOb.options[1].value='1';
        cityOb.options[1].text='海淀区';
        cityOb.options[2].value='2';
        cityOb.options[2].text='丰台区';
        break;
    case '2':
        cityOb.options.length=4;
        cityOb.options[0].value='0';
        cityOb.options[0].text='请选择';
        cityOb.options[1].value='1';
        cityOb.options[1].text='石家庄';
        cityOb.options[2].value='2';
        cityOb.options[2].text='承德';
        cityOb.options[3].value='3';
        cityOb.options[3].text='唐山';
        break;
    case '3':
        cityOb.options.length=2;
        cityOb.options[0].value='0';
        cityOb.options[0].text='请选择';
        cityOb.options[1].value='1';
        cityOb.options[1].text='济南';
        break;
    }
}
</script>
</head>
<body>
<select onchange="addCity();" name="province">
    <option value="0">请选择</option>
    <option value='1'>北京</option>
    <option value='2'>河北</option>
    <option value='3'>山东</option>
</select>
<select name="city">
    <option value="0">请选择</option>
</select>
<input onclick="fun1();" type="button" value="遍历option"/>
</body>
</html>

 

posted @ 2015-09-06 08:42  tiandi2050  阅读(207)  评论(0)  编辑  收藏  举报