1)获取input中的值
html:
<td>姓名:</td> <td width="50" ><input type="text" id="name" name="name" class="name"></td>
jQuery:
var name = $("#name").val(); // 通过ID获取 var name = $(".name").val(); // 通过class获取
js:
var name = document.getElementById("name").value; // 通过ID获取
document.getElementsByName("name").value //通过name属性获取
document.getElementById("id名")是根据页面id获取元素,在一个页面中元素id必须是惟一 一个,否则用这种方法将取不到其元素。id就相当于我们个人的身份证号一样,在一个世界上,每个人都是唯一的身份证号。如果页面中没有此id,会找不到你要找的元素,就会报null的错误。
用getElementsByName()用这种方法是根据页面的元素名来获取页面元素,在一个页面中,元素id是唯一的,但是页面的元素名字name可以是重复的,name就比如我们人名一样,在这个世界中,会有重名的存在。假设一个两个名叫汤姆的人在一起,其他人过来找汤姆,就会直接找到两个,在页面中也是一样,这种方法,我们会得到一个数组。如果我们找到某个具体的页面元素,可以在此方法后面添加一个下标"[整数]",下标是从0开始的,此整数也就是在页面中你要获取的此元素的位置减一。
2)获取radio选中的选项
jQuery:
以性别为例:
html:
<td>性别:</td> <td id="gender" width="50" height="20"> <input id="male" type="radio" name="gender" value="男" >男 <input id="female" type="radio" name="gender" value="女" >女 </td>
jquery:
// 获取性别
var gender = $("input:radio[name = 'gender']:checked").val();
js:
var gender=document.getElementByName("gender"); var selectvalue=""; // selectvalue为radio中选中的值 for(var i=0;i<gender.length;i++){ if(gender[i].checked==true) { selectvalue=gender[i].value; } }
3)获取select标签选中的内容
以民族为例:
html:
<td>民族:</td> <td width="200"> <select id="nation" name="nation"> <option id="han" name="han" value="汉族">汉族</option> <option id="man" name="man" value="满族">满族</option> <option id="zang" name="zang" value="藏族">藏族</option> </select> </td>
jquery:
$("#nation").change(function(){
// 获取select下拉选中选中的option的值
var value = $("#nation option:selected").val();
});
js:
var myselect=document.getElementById("nation"); //获取select对象:
var index=myselect.selectedIndex ; //拿到选中项的索引,selectedIndex代表的是你所选中项的index
myselect.options[index].value; //拿到选中项options的value:
myselect.options[index].text; //拿到选中项options的text:
4)获取checkbox(复选框)选中的内容
以爱好为例:
html:
<td>爱好:</td> <td id="hobby" class="hobby" colspan="3"> <label><input id="literature" name="hobby" type="checkbox" value="文学" />文学 </label> <label><input id="sport" name="hobby" type="checkbox" value="体育" />体育 </label> <label><input id="music" name="hobby" type="checkbox" value="音乐" />音乐 </label> </td>
jquery:
var hobby = [];
$(".hobby input").each(function() {
if($(this).prop("checked")) {
// array.push() :在数组尾部添加新的元素,
// 并返回新的数组长度。
hobby.push($(this).val());
}
});
将hobby数组转为字符串格式
if(hobby.length != 0) {
// join方法会返回一个字符串。该字符串是通过把 hobby 的每个元素转换为字符串,
// 然后把这些字符串连接起来,在两个元素之间插入 "、" 字符串而生成的。
hobby = hobby.join("、");
hobby = " 爱好:" + hobby;
}
js:
function show(){
obj = document.getElementsByName("hobby");
check_val = [];
for(k in obj){
if(obj[k].checked)
check_val.push(obj[k].value);
}
alert(check_val);
}