Jquery 操作表单

已于 2022-03-06 18:38:19 修改
阅读量310 收藏 1
点赞数
分类专栏： elasearch 文章标签： jquery javascript webview
于 2022-02-25 17:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/123137204
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <select id="single">
        <option>徐海涛1</option>
        <option>徐海涛</option>
        <option>徐大硕</option>
      </select>

    <input type="checkbox" name="kk" value="check1" /> check111
    <input type="checkbox" name="kk" value="check2" /> check222
    <input type="checkbox" name="kk" value="check3" /> check333
    <input type="radio" name="kk1" value="radio1" /> radio111
    <input type="radio" name="kk1" value="radio2" /> radio222
    <input name="email" disabled="disabled" />

    <button onclick="dianji()">点击</button>
</body>

<script>
    $("#single").val("徐海涛1"); //初始下拉列表选中

    $("input[name=kk]").val(["check1", "check2"]); //多选
    $("input[name=kk1]").val(["radio1"]); //单选


    function dianji() {
        $("input[name=kk]:checked").each(function(index, ele) { //checked 勾选的
            console.log($(ele).val());
        })
        console.log("------------");
        $("input[name=kk1]:checked").each(function(index, ele) {
            console.log($(ele).val());
        })
    }



    console.log($("input:enabled").length)
</script>


</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>



</head>

<body style="margin-left: 0px;padding-left: 0px;">
    <!-- 下拉菜单 -->
    <select id="single">
        <option>Single1</option>
        <option>Single2</option>
      </select>
    <br/> <br/>
    <!-- 多选 -->
    爱好:
    <input type="checkbox" name="like" value="唱歌" /> 唱歌
    <input type="checkbox" name="like" value="跳舞" /> 跳舞

    <br/><br/> 喜欢哪些语言:
    <input type="checkbox" name="langue" value="C#" /> C#
    <input type="checkbox" name="langue" value="Java" /> Java
    <input type="checkbox" name="langue" value="Javascript" /> Javascript
    <input type="checkbox" name="langue" value="c++" /> c++
    <br/><br/> 爱跑步吗？
    <input type="radio" name="run" value="爱" /> 爱1
    <input type="radio" name="run" value="不爱" /> 不爱1


    <script>
        $("#single").val("Single2"); //默认下拉选中Single2
        //下拉菜单一旦改变,会调用函数
        $("#single").change(function() {
            console.log($("#single").val()); //取出下拉菜单选中的值
        });


        //多选  爱好:
        $("input[type=checkbox][name=like]").val(["唱歌", "跳舞"]);
        $("input[type=checkbox][name=like]").change(function() {
            $("input[type=checkbox][name=like]").each(function() {
                if ($(this).is(':checked')) {
                    console.log(($(this).val()));
                }
            })
        });

        //多选  喜欢哪些语言:
        $("input[type=checkbox][name=langue]").val(["Java", "Javascript"]); //默认选中
        $("input[type=checkbox][name=langue]").change(function() {
            $("input[type=checkbox][name=langue]").each(function() {
                if ($(this).is(':checked')) {
                    console.log(($(this).val()));
                }
            })
        });

        // 单选
        $("input[type=radio][name=run][value=不爱]").attr("checked", "checked");
        $("input[type=radio][name=run]").change(function() {
            console.log($(this).val()); //取出下拉菜单选中的值
        });
    </script>
</body>

</html>

海涛高软
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery对表单的操作
ChibiMarukoChan的博客
06-24 553
表单应用 1.单行文本框应用 初始化网页，样式如下： <form> <fieldset> <legend>个人基本信息</legend> <div class="col-line"> <label>名称：</label&g...
jQuery操作Form表单元素
达拉斯母牛
07-27 7826
Web开发中经常需要操作表单，form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的读写值操作比较多变，checkbox和radio经常用在一个分组里，实现多选或者单选。jQuery提供了利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
jQuery中的表单
u011435776的博客
04-11 859
表单一般分为3部分：表单标签、表单域与表单按钮1、单行文本框获得或失去焦点改变样式CSS代码：input:focus,textarea:focus { border: 1px solid #f00; background: #fcc; } 但IE6不支持除超链接元素之外的：hover伪类选择器，可以通过jQuery实现同样的效果。首先添加css样式.focus { border: ...
jQuery中form表单的基本使用
qq_36507046的博客
07-30 5460
本节内容主要介绍了jQuery中form表单的基本使用，同时附上了相应的的评论列表案例。
Jquery表单
weixin_45203607的博客
09-25 1397
Jquery表单 常用表单操作 下面演示需要用到的HTML <form action="https://www.baidu.com/" method="get" id="form_1"> 账号:<input type="text" name="name" value="hu" required="required" /><span id="name_span"></span> <br /> 密码:<input type=
jQuery表单库jquery.form.js
热门推荐
云客的技术博客【云游天下 做客四方】
07-11 1万+
本主题是《云客drupal源码分析》的番外篇，在drupal系统中用于支持AJAX API，由于这是一个独立实用的库，因此专门用一个主题介绍 简介： jQuery表单库（jquery.form.js库）以jQuery为基础，用于处理表单AJAX提交，使得表单AJAX提交简单、容易，且能完整控制提交过程和处理结果，不需要任何特殊标签辅助，不影响原表单结构，只要使用该库就能使普通表单平滑升级...
jQuery操作表单常用控件方法小结
10-24
主要介绍了jQuery操作表单常用控件方法,实例总结了jQuery针对常用表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
实用jquery操作表单元素的简单代码
10-22
下面小编就为大家带来一篇实用jquery操作表单元素的简单代码。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery对表单的操作代码集合
01-19
改变文本框的获得焦点的样式 代码如下: <form action=”#” method=”POST” id=”regForm”> <fieldset> 个人基本信息</legend> <div> ”username”>名称：</label> <input id=”username” type=”text”...
使用jQuery实现表单数据验证
qq_48666244的博客
12-07 3854
1、$('form :input')返回form中的所有表单对象，包括textarea、select、button等；$('form input')返回form中的所有input标签对象。2、form input是属于层级选择器（将每一个选择器匹配到的元素合并后一起返回）；form :input是属于表单选择器（匹配所有 input、textarea、select、button等）。triggerHandler()方法触发被选元素的指定事件类型。triggerHandler()方法与trigger()方
通过Jquery获取表单的数据
qq_52562865的博客
08-15 4408
简单的JQuery获取表单
Jquery实战----表单制作
word_tian_的博客
04-20 420
如图，我们需要在表单中放置一个这样的东西 ，初始状态如一致，每项都有操作按钮（增加一行、向上替换、向下替换，删除一行），点击所在行还可以选中行，如果用UI框架写，我们只需要引入所需的组件，我相信不到1小时就可以实现了，那如果用Jquery怎么写呢？
jquery之form表单操作
weixin_67271870的博客
11-06 1526
下面所有操作以上面的代码为例。
jQuery给表单设置值
u011927449的博客
05-27 389
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { $("input.
jquery常用表单操作
weixin_39037804的博客
10-17 85
//js将表单序列化成对象 $.fn.serializeObject = function () { var $els = $(this).find("[name]"); var formData ...
五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）
weixin_44009656的博客
05-06 2679
文章目录前言一、 表单应用1.1 单行文本框应用1.2 多行文本框应用1.3 复选框应用1.3 下拉框应用1.5 表单验证二、 表格应用2.1 表格变色2.1.1 普通的隔行变色2.1.2 单选框控制表格行高亮2.1.3 复选框控制表格行高亮2.2 表格展开关闭2.2.1 默认展开代码：2.2.2 默认收缩代码：2.3 表格内容筛选三、 其他应用3.1 网页字体大小3.2 网页选项卡3.3 网页换肤总结 前言 上一章讲解了jQuery 中的事件和动画 ，现在讲解jQuery 对表单、表格的操作。 一、
jQuery 操作 表单
qsfwy的专栏
07-28 120
jQuery 操作 表单 jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作;1.假如我们有如下页面 &lt;input type="text" name="textname" id="text_id" value=""&gt; &lt;!--其余的请自行添加.重要的是要有TYPE.NAME.ID等,一般情况这些都是有的--...
JQuery操作form表单
晨曦若梦的博客
12-03 5023
使用JQuery前，先引入JQuery库 <script src="js/jquery-3.3.1.min.js"></script> 提交表单 方式一：JQuery事件，submit()方法 form表单，action属性必需，后台控制页面跳转 <form id="form" action="user/login" method="post"> <i...
jQuery操作form表单
LFSenior
07-15 3564
1.1 操作form表单 1.1.1 属性操作 设置属性： // 第一个参数表示：要设置的属性名称 // 第二个参数表示：改属性名称对应的值 $(selector).attr(“title”, “传智播客”);   获取属性： // 参数为：要获取的属性的名称，改操作会返回指定属性对应的值 $(selector).attr(“title”); 此时，返回指定属性的值
jquery操作表单和表格
最新发布
05-20
下面是一些常见的jQuery操作表单和表格的方法。 1. 获取表单元素的值： ```javascript var value = $('#inputId').val(); // 获取输入框的值 var selectedValue = $('#selectId').val(); // 获取下拉列表选中项的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值