JQuery表单元素取值赋值方法总结


Posted in jQuery onMay 12, 2020

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

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>

运行效果:

JQuery表单元素取值赋值方法总结

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>

运行效果:

JQuery表单元素取值赋值方法总结

二、获取和设置单选项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>

运行效果:

JQuery表单元素取值赋值方法总结

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

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

运行效果:

JQuery表单元素取值赋值方法总结

JQuery表单元素取值赋值方法总结

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

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

运行效果:

JQuery表单元素取值赋值方法总结

JQuery表单元素取值赋值方法总结

//设置select下拉框的第二个元素为当前选中值 $("#_select")[0].selectedIndex = 2;

运行效果:

JQuery表单元素取值赋值方法总结

//下拉框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 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
Jquery Fade用法详解
Nov 06 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
You might like
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
python映射列表实例分析
2015/01/26 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python 从相对路径下import的方法
2018/12/04 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
会计应聘求职信范文
2013/12/17 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
召开会议通知范文
2015/04/15 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技