<!--
1.option
selected屬性,如果我們?cè)谙吕斜砝锩孢x擇了一個(gè)option那么他的selected="true" ,如果我們想設(shè)置當(dāng)前的option是選中 狀態(tài)的,那么我們只要設(shè)置
它的selected=‘true’或者selected="selected"或者selected,這幾種方式設(shè)置都可以,但是在我們使用jquery或者js獲取selected這個(gè)屬性的值時(shí)婆殿,
如果他當(dāng)前的狀態(tài)時(shí)選中的那么他的屬性值就是true
2.checkedbox,radio
checked屬性只要我們?cè)O(shè)置了checked屬性那么他的值就是true其實(shí)這幾個(gè)屬性的設(shè)置方法都是一樣的,如checked="checked"罩扇,或者
checked="true"或者checked這幾種設(shè)置方法都可以設(shè)置這個(gè)當(dāng)前的checkbox為選中狀態(tài)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>##</title>
<style type="text/css">
</style>
</head>
<body>
文本域:
? ? <input type="text" name="userName" id="userName" value="默認(rèn)值"/><br/>
單選框:
? ? <input type="radio" name="sex" value="woman"/>女
? ? <input type="radio" name="sex" value="man">男<br/>
復(fù)選框:
? ? <input type="checkbox" name="hobby" value="1">1
? ? <input type="checkbox" name="hobby" value="2">2
? ? <input type="checkbox" name="hobby" value="3">3<br/>
下拉菜單:
? ? <select name="hobby" id="hobby">
? ? ? ? <option value="1">1</option>
? ? ? ? <option value="2">2</option>
? ? ? ? <option value="3">3</option>
? ? </seclect><br/>
提交不同表單元素的值:
? ? <input type="button" value="獲取表單元素的值" onclick="getVal();"/>
<script type="text/javascript">
function getVal(){
? ? var str="";
? ? //獲取文本域的值
? ? var text=document.getElementById("userName");
? ? str="文本域:"+text.value+"婆芦;";
? ? //獲取單選框的值
? ? var radios=document.getElementsByName("sex");
? ? for(var i=0;i<radios.length;i++){
? ? ? ? if(radios[i].checked){
? ? ? ? ? ? str+="單選框:"+radios[i].value+"怕磨;";
? ? ? ? }
? ? }
? ? //獲取復(fù)選框的值
? ? var checkboxs=document.getElementsByName("hobby");
? ? for(var i=0;i<checkboxs.length;i++){
? ? ? ? if(checkboxs[i].checked){
? ? ? ? ? ? str+="復(fù)選框:"+checkboxs[i].value+";";
? ? ? ? }
? ? }
? ? //獲取下拉菜單的值
? ? //方法一:
? ? var selects=document.getElementById("hobby")
? ? str+="下拉菜單:"+selects.value+"消约;";
? ? //方法二:
? ? str+="下拉菜單:"+selects.options[selects.selectedIndex].value;
? ? console.log(str);
? ? alert(str)
}
</script>
</body>
</html>