jQuery 表單元素取值與賦值方法總結

時間 2019-12-12

原文原文鏈接

1、普通文本框的賦值與取值

1.1.1賦值javascript

<h2>jQuery 表單元素取值與賦值方法總結</h2>
    <input type="text"  class="test1"/>
    <input type="button"  value="賦值" onclick="get()"/>
    <input type="text" class="test2"/>
    <script type="text/javascript" charset="utf-8">
          function get(){
                  var test1 = $("input.test1").val();         
                  $(".test2").val(test1);
              }
    </script>

運行效果：html

1.1.2 取值java

示例代碼：jquery

<h2>jQuery 表單元素取值與賦值方法總結</h2>
    <input type="text" value="我是普通文本框" class="test1"/>
    <input type="button" value="取值" onclick="get()"/>
    <span id="span">
        
    </span>
    <script type="text/javascript" charset="utf-8">
          function get(){
                  var test1 = $("input.test1").val();         
                  $("#span").html(test1);
              }
    </script>

運行效果：app

2、獲取和設置單選項radio的值dom

2.1.1獲取單選項radio的值spa

<input name="rd" type="radio"  value="1">1
        <input name="_radio" type="radio"  value="2" checked="checked">2
        <input type="button" value="取值" onclick="Show_redio()"/>
        <script> 
            function Show_redio()
            {
                //var _val = $('input:radio:checked').val();
                var _val =  $("input[type='radio']:checked").val();
                //var _val = $("input[name='rd']").val();
                alert(_val);
            }
        </script>

運行效果：code

3、獲取和設置複選框的值htm

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery 表單元素取值與賦值方法總結</title>
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>

    <body>
        <input type="checkbox" name="check" value="A" id="checkbox_id1">A
        <input type="checkbox" name="check" value="B" id="checkbox_id2">B
        <input name="check" type="checkbox" value="C" checked="checked" id="checkbox_id3"> C
        <input type="button" value="點擊" onclick="Show_checkbox()" />
        <script>
            function Show_checkbox() {
                //取得多選框值
                //多選框checkbox：$("#checkbox_id").attr("value");
                val3 = $("#checkbox_id3").attr("value");
                val2 = $("#checkbox_id2").attr("value");
                val1 = $("#checkbox_id1").attr("value");

                //多選框checkbox：  $("#chk1").attr("checked",'');//不打勾
                //$("#chk2").attr("checked",true);//打勾
                //if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾

                //多選框checkbox 不打勾
                $("#checkbox_id3").attr("checked", '');
                //多選擇框checkbox打勾
                $("#checkbox_id1").attr("checked", false);
                $("#checkbox_id2").attr("checked", true);

                if($("#checkbox_id1").attr('checked') == undefined)
                    alert("沒有選中!");
                else
                    alert("已經選中!");
            }
        </script>
    </body>

</html>

運行效果：對象

4、獲取和設置下拉菜單列表的值

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery 表單元素取值與賦值方法總結</title>
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>

    <body>
        <select name="_select" id="_select" onchange="Show_select()">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
        <span id="span">
            
        </span>
        <script>
            function Show_select() {

                 var options = $("#_select option:selected"); //獲取選中的項

                 alert(options.val()); //拿到選中項的值

                 $("#span").html(options.text()); 
            }
        </script>
    </body>

</html>

運行效果：

//設置select下拉框的第二個元素爲當前選中值
 $("#_select")[0].selectedIndex = 2;

運行效果：

//下拉框select
  //設置一下值爲D的項目爲當前選中項
  $("#_select").attr("value",'D');
  
  //添加下拉框的option
  $("<option value='E'>E</option><option vlaue='F'>F</option>").appendTo("#_select");
  
  //清空下拉框
  $("#_select").empty();

5、獲取和設置文本框/文本域的值

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery 表單元素取值與賦值方法總結</title>
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <textarea cols="55" rows="5" name="text" id="text"></textarea>
        <input type="button" value="賦值文件框" onclick="Show_textarea()" />
        <script>
            function Show_textarea() {
                //填充內容
                var test = "werrtyhgfdsaadfgh"
                $("#text").val(test);

                //清空內容
                //$("#text").attr("value","");
            }
        </script>
    </body>

</html>

運行效果：

Jquery得到控件值的方法

取值：

$("")是一個jquery對象，而不是一個dom element
value是dom element的屬性
jquery與之對應的是val
val() :得到第一個匹配元素的當前值。
val(val):設置每個匹配元素的值。
因此，代碼應該這樣寫：
取值：val = $("#id")[0].value;
賦值：
$("#id")[0].value = "new value";
或者$("#id").val("new value");

或者這樣也能夠：val = $("#id").attr("value");
獲取一組radio被選中項的值

var item = $('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個元素爲當前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個元素爲當前選中值
$('input[@name=items]').get(1).checked = true;

獲取值：

文本框，文本區域：$("#txt").attr("value")；
多選框checkbox：$("#checkbox_id").attr("value")；
單選組radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容

多選框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾

單選組radio： $("input[@type=radio]").attr("checked",'2');//設置value=2的項目爲當前選中項
下拉框select： $("#sel").attr("value",'-sel3');//設置value=-sel3的項目爲當前選中項
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。