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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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 fread读取文件注意事项
2016/09/24 PHP
php连接mysql数据库
2017/03/21 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
用javascript连接access数据库的方法
2006/11/17 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
文员求职信
2014/07/15 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
公司租房协议书
2014/10/14 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
办公用品管理制度
2015/08/04 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android