js,jquery获取值整合(文本框,下拉框,单复选框)

针对常用按钮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 id="payWay"  name="payWay">   

  <option   value="1" id="payB">支付宝</option>   

  <option   value="2">微信</option>   

  <option   value="2">银行卡</option>

  <option   value="3">现金</option>   

 </select>

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页