<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

    <listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

      <address id="jxdzp"></address>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

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

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

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




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

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

          相關閱讀
          深山行者旅行社網站管理系統 v1.4
          默認系統
          一個效果非常不錯圖片載入loading等待效果
          css解決中英混合鏈接下劃線不對齊問題
          做好的網站把http改成https申請SSL域名證書
          旅行社網站模板9
          設置兩個未知高度的DIV保持等高
          簡單的圓角實現方案
          共有0條關于《jquery獲取不同類型表單值的方式》的評論
          發表評論
          正在加載評論......
          返回頂部發表評論
          呢 稱:
          表 情:
          內 容:
          評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
          驗證碼: 驗證碼 
          網友評論聲明,請自覺遵守互聯網相關政策法規。

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

          更多信息>>欄目類別選擇
          百度小程序開發
          微信小程序開發
          微信公眾號開發
          uni-app
          asp函數庫
          ASP
          DIV+CSS
          HTML
          python
          更多>>同類信息
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
          js指定日期加n天加n月加n年
          jquery中動態生成的代碼使用on hover事件時不出現效果
          更多>>最新添加文章
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
          抖音直播音掛載小雪花 懂車帝小程序
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          python通過代碼修改pip下載源讓下載庫飛起
          python里面requests.post返回的res.text還有其它的嗎
          更多>>隨機抽取信息
          中國旅行社海南旅游網
          input文本輸入框只能輸入數字或字母或漢字等
          華東賓館網站
          微信小程序騰訊視頻播放組件tencentvideo(wxa75efa648b60994b)
          CSS選擇符詳解
          絕對可以用的IE6綠色版下載
          88国产精品视频一区二区三区