訂閱本欄目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery獲取不同類型表單值的方式

2022/2/22 15:45:03 字體: 瀏覽 833




在日常開發過程中,有許多用到表單的地方。比如登錄,注冊,比如支付,填寫訂單,比如后臺管理等等。

jquer獲取不同類型表單值的常見方法。


常見表單
單行文字域:<input type="text" id='qwbm_text' value='這個單行文本'>
密碼域:<input type="password" id='qwbm_pass' value='這個是密碼內容'>
單選:
<label for="qwbm_sex1"><input type="radio" name='qwbm_sex' id='qwbm_sex1' value="1">男</label>
<label for="qwbm_sex2"><input type="radio" name='qwbm_sex' id='qwbm_sex2' value="2">女</label>
多選:
<label for="q_duoxuan1"><input type="checkbox" value='1' name='q_duoxuan' id='q_duoxuan1'>籃球</label>
<label for="q_duoxuan2"><input type="checkbox" value='2' name='q_duoxuan' id='q_duoxuan2'>羽毛球</label>
<label for="q_duoxuan3"><input type="checkbox" value='3' name='q_duoxuan' id='q_duoxuan3'>手球</label>
<label for="q_duoxuan4"><input type="checkbox" value='4' name='q_duoxuan' id='q_duoxuan4'>乒乓球</label>
<label for="q_duoxuan5"><input type="checkbox" value='5' name='q_duoxuan' id='q_duoxuan5'>足球</label>
下拉列表:
<select name="q_city" id="q_city">
<option value="1">做網站</option>
<option value="2">做小程序</option>
<option value="3">做公眾號</option>
<option value="4">做全棧</option>
</select>
多行文字域:
<textarea name="" id="q_remark" cols="30" rows="10">這里是備注</textarea>

用jQuery獲取對應表單類型的值

//昵稱
var name = $("#qwbm_text").val();
console.log(name);

// 密碼
var pass = $("#qwbm_pass").val();
console.log(pass);

// 性別
var sex = $("input:radio:checked").val();
console.log(sex);

// 性別
var sex1 = checkAll($("input:radio"));
console.log(sex1);

// 興趣
var hobby = checkAll($("input:checkbox"));
console.log(hobby);

// 業務
var city = $("#q_city").val();
console.log(city);

// 業務
var city1 = $("#q_city option:selected").val();
console.log(city1);

// 備注
var remark = $("#q_remark").val();
console.log(remark);
復制代碼
一個可以獲取單選和多選的函數,返回值得數組

//獲取單選或者多選的值,返回一個值得數組,如果沒有值,返回空數組,參數inputlist是jQuery對象
function checkAll(inputlist){
    var arr = [];
    var num = inputlist.length;
    for(var i = 0; i < num; i++){
        if(inputlist.eq(i).is(":checked")){
            arr.push(inputlist.eq(i).val());
        }
    }
    return arr;
}


總結:
單行文字:$("#qwbm_text").val();
密碼:$("#qwbm_pass").val();
單選:$("input:radio:checked").val();
多選:遍歷 $("input:checkbox"),判斷是否選中
下拉:$("#q_city").val();
   或者
   $("#q_city option:select").val();
多行文字:$("q_remark").val();

相關閱讀
javascript日期驗證比較
jquery實現移動端下拉加載刷新更多信息
一個簡單的用java寫的非常不錯的貪食蛇游戲
旅行社線路主題默認模板4
uni-app基礎知識列表渲染
python對微信操作要用到這兩個庫wxpy與itchat
屏幕兩種色彩左右像電影屏幕一樣分開
記錄滾動條位置(使用userdate)
共有0條關于《jquery獲取不同類型表單值的方式》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
js指定日期加n天加n月加n年
jquery中動態生成的代碼使用on hover事件時不出現效果
iframe里阻止_blank彈出新窗口的方法
jquery實現下拉加載更多
jquery獲得當前所有input表單數據并進行序列化的各種問題與解決方案serialize與serializeArray的區別分析
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
更多>>隨機抽取信息
css里expression實現界面對象的批量控制
昆山旅游網
一行內文本超出指定寬度后用省略號代替
CSS編寫中靈活運行注釋的意義
表單正則表達式
利用java使圖片左右上下循環連續滾動不出現空白
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414