首頁 web前端 js教程 jquery對單選框,多選框,文字方塊等常見操作小結_javascript技巧

jquery對單選框,多選框,文字方塊等常見操作小結_javascript技巧

May 16, 2016 pm 05:04 PM
jquery 單選框 多選框 文字方塊

一、文本框、單選按鈕、複選框、相關操作

複製代碼 程式碼如下:

var sex=$("input[name='sex']:checked").val();   //取得一組radio被選取項的值 
var item=$("#sel option:selected").text();      //取得select被選取項目的文字 
var option_num=$('#sel').val(); //取得select項目索引
$("#sel")[0].selectedIndex =1;                  //select找到下拉方塊的第二個元素為目前選取值
$$ ']").get(1).checked=true;     //radio單選組的第二個元素為目前選取值


 或預設單選框預設:
$("input[name='sex']").each(function(){
            if($(this).val()= =s){
                $(this).attr("checked",true);
        //this.checked=true;
            }
        });



Jquery 根據value值設置下拉列表(select)默認選中項 代碼如下:


 
  <script><BR>  function bao(s)<BR>  <script><BR>  function bao(s)<BR>  {<BR>     txt.value=s;<BR>     //選擇後,讓第一項被選中,這樣,就有Change啦.<BR>   true;<BR> }</script>
 
 
二、 jQuerySelect選擇的Text和取得Select選擇的Text Value
複製程式碼

程式碼如下:



程式碼如下:

語法解釋: $("#select_id").change(function(){//code...});   //為Select新增事件,當選擇其中一項時觸發 var checkText=$("#select_id" ).find("option:selected").text();  //取得Select選擇的Text
 var checkValue=$("#select_id").val();  //取得Select選擇的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //取得Select選擇的索引值
 var maxIndex=$("#select_id option:last").attr("index"); //取得Select最大的索引值

jQuery設定Select選擇的Text和Value:

語法解釋:
 $("#select_id ").get(0).selectedIndex=1;  //設定Select索引值為1的項目選取
 $("#select_id ").val(4);   //設定Select的Value值為4的項目選取
 $("#select_id option[text='jQuery']" ).attr("selected", true);   //設定Select的Text值為jQuery的項目選取


jQuery新增/刪除Select的Option項目:

語法解釋:
 $("#select_id").append("");  //為Select追加一個Option(下拉項目)

 $("#select_id").prepend("");  //為Select插入一個Option(第一個位置) $("#select_id option:last").remove();  //刪除Select中索引值最大Option(最後一個) $("#select_id option[ index='0']").remove();  //刪除Select中索引值為0的Option(第一個) $("#select_id option[value='3']").remove( );  //刪除Select中Value='3'的Option $("#select_id option[text='4']").remove();  //刪除Select中Text='4'的Option
應用:
複製程式碼



複製程式碼







jQuery common




本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南 jQuery引用方法詳解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解:快速上手指南

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?

jQuery如何移除元素的height屬性? jQuery如何移除元素的height屬性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性?

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改頁面所有a標籤的文本

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a標籤的文字內容

了解jQuery中eq的作用及應用場景 了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

了解jQuery中eq的作用及應用場景

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性?

PHP常用的檔案操作函數總結 PHP常用的檔案操作函數總結 Apr 03, 2024 pm 02:52 PM

PHP常用的檔案操作函數總結

See all articles