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 Plupload上传插件的使用
Apr 19 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jquery自定义组件实例详解
Dec 31 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP学习笔记之一
2011/01/17 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
关于美容院的活动方案
2014/08/14 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
软件测试专业推荐信
2014/09/18 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
创业计划书详解
2019/07/19 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
python热力图实现的完整实例
2022/06/25 Python