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

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

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




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

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();

相關閱讀
asp計算頁面執行時間顯示到毫秒
四川省中國青年旅行社有限公司高新分社
javascript表格內移動上下列,可以做成ajax加上動態程序做成上下移動順序
Visa簽證服務商建站解決方案
Vista中使用IIS 7.0三個常見問題
8種Python字符串拼接的方法,你知道幾種
旅行社網站模板默認風格1
默認系統
共有0條關于《jquery獲取不同類型表單值的方式》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

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

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
javascript獲取瀏覽器指紋可以用來做投票
火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
js指定日期加n天加n月加n年
jquery中動態生成的代碼使用on hover事件時不出現效果
iframe里阻止_blank彈出新窗口的方法
更多>>最新添加文章
抖音直播音掛載小雪花 懂車帝小程序
javascript獲取瀏覽器指紋可以用來做投票
火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
更多>>隨機抽取信息
asp怎么得到像論壇一樣的第幾樓分頁
uni-app自定義組件調用
微信小程序直播組件live-player-plugin(wx2b03c6e691cd7370)
告訴你一些GOOGLE搜索你不知道的東西
ASP中控制輸出字符串的長度
radio單選按鈕組選擇詳細
日韩gv国产gv欧美旡码|伊人久久大香线AV五月天|亚洲精品无码永久在线|亚洲第一页自拍1414