jQuery 表单元素取值与赋值方法总结

一、普通文本框的赋值与取值

1.1.1赋值

<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>

运行效果：

1.1.2 取值

示例代码：

<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>

运行效果：

二、获取和设置单选项radio的值

2.1.1获取单选项radio的值

<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>

运行效果：

三、获取和设置复选框的值

<!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>

运行效果：

四、获取和设置下拉菜单列表的值

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

五、获取和设置文本框/文本域的值

<!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()；//清空下拉框