jquery获取input选中值，jquery获取radio选中值，jquery获取select选中值，jquery获取checkbox选中值，jquery使用ajax异步提交表单数据

站长软件开发1年前 (2023-12-15)技术分享408

jquery获取input值：

//<input name="myinput"/>
var inputValues = $('input[name="myinput"]').val();//利用name属性获取input值，更方便，也便于后面修改的时候赋值
$('input[name="myinput"]').val(111);//为name为myinput的input赋值

jquery获取radio选中值：

//<input type="radio" name="myradio" value="1" />
//<input type="radio" name="myradio" value="2" />
$('input[name="myradio"]:checked').val();//获取radio选中的值
$("input[name='myradio'][value=2]").attr("checked",true);//让name=myradio且value等于2的radio选中

jquery获取select选中值：

//<select name="myselect"><option value="1"></option><option value="2"></option></select>
$("select[name='myselect'] option[value='1']").attr("selected", true); //设置select选中的option
$("select[name='myselect']").val();//获取select选中值

jquery获取checkbox选中值：

//<input type="checkbox" name="mycheckbox" value="1"/>苹果 
//<input type="checkbox" name="mycheckbox" value="2"/>橘子 
//<input type="checkbox" name="mycheckbox" value="3"/>梨子 
//<input type="checkbox" name="mycheckbox" value="4"/>香蕉
var checked=[];//定义一个数组
$('input[name="mycheckbox"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数
    checked.push($(this).val());//将选中的值添加到数组checked中
});

jquery使用ajax异步提交表单数据:

<form name="myform" method="post">
     <ul>
     <li class="l1">用户名：</li>
     <li class="l2"><input type="text" name="name"/></li>
     <li class="l1">密码：</li>
     <li class="l2"><input type="text" name="password"/></li>
     <li class="l1">类型：</li>
     <li class="l2">
         <select name="leixing">
    		<option value="0">选择类型</option>
    		<option value="1">管理员</option>	
    		<option value="2">审核员</option>	
         </select>
     </li>
     <li class="l1">是否毕业：</li>
     <li class="l2">
         <label>
             <input name="denglu" type="radio" value="1" /> <strong>否</strong>
        </label>
        <label>
            <input name="denglu" type="radio" value="2"/> <strong>是</strong>
         </label>
     </li>
     
     <li class="l3"><input type="submit" value="保存"/></li>
     </ul>
 </form>

//以上面form表单为例
$('form').submit(function(event) {
        // 阻止表单提交默认行为
        event.preventDefault();
        // 获取表单数据
        var formData = $(this).serialize();//此处内容对应表单里面的input （name:value）
        $.ajax({
          url: 'https://www.you_api.com/api',
          type: 'POST',
          data: formData,
          success: function(data) {
            // 处理成功响应
            consoel.log(data);
            if(data.code==200){
                
            }else{
                
            }
          },
          error: function(xhr, status, error) {
            // 处理错误响应
            console.log(xhr.responseText);
          }
        });
});