js，jquery获取值整合（文本框，下拉框，单复选框）

心寒丶 2017-08-01 10:14:31

9299

分类专栏： # JS,JQUERY 文章标签： javascript html jquery 获取元素值下拉框

本文链接：https://blog.csdn.net/jungeCSND/article/details/76502552

版权

针对常用按钮js，jquery获取值方法，目前小编最常用的这几种方法，也为了帮大家区分js和jquery获取值区别，希望对大家有帮助，如有更好的方法，欢迎大家补充！

js获取值：

一：文本框 var name=document.getElementById("name");

二：单选框：

var obj = document.getElementsByName("sex");

for(var i=0; i<obj.length; i ++){

if(obj[i].checked){
alert(obj[i].value);
}
}

三：下拉框

（1）

var test=document.getElementById("payWay");
var index=test.selectedIndex;
alert(index);
var ss=test.options[index].value;
alert(ss);

（2）如果下拉框内容少的话，这种方法比较简单
var obj=document.getElementById("payB");
alert(obj.value);
（3）
var obj=document.getElementById("payWay");
for(var i=0;i<obj.length;i++){
if(obj[i].selected==true){
alert(obj[i].value);
}
}

四：多选框

var str=document.getElementsByName("friut");
var chestr="";
for (i=0;i<str.length;i++)
{
if(str[i].checked == true)
{
chestr+=str[i].value+",";
}
}

alert(chestr);

jquery获取值：

一：文本框

var name= $("#name").val();

二：单选框

（1）$('input:radio:checked').val()；

(2)$("input[type='radio']:checked").val();

(3)$("input[name='sex']:checked").val();

三：下拉框

var options=$("#payB option:selected");

四：复选框

（1）$("#apple").attr("value")；

（2）$(function(){
$("input[name='fruit']:checkbox").click(function() {
var str = "";
$("input[name='fruit']:checkbox").each(function() {
if($(this).is(":checked"))
{
str += $(this).attr("value")+",";
}
});
if(str != null && str.length > 1)
{
str = str.substring(0,str.length-1);
}

alert(str);
});

});

案例如下：

姓名：<input id="name" class="selectui-input w_22" />

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

选择要买的水果

<input type="checkbox" name="friut" id="apple" value="苹果" />苹果
<input type="checkbox" name="friut" value="香蕉" />香蕉
<input type="checkbox" name="friut" value="梨子" />梨子

请选择支付方式

</select>