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 相关文章推荐
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery实现轮播图特效
Apr 12 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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中使用灵巧的体系结构
2006/10/09 PHP
php常用hash加密函数
2014/11/22 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
js加解密 脚本解密
2008/02/22 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
公司保洁员管理制度
2015/08/04 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
python字符串的一些常见实用操作
2022/04/06 Python