11

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>测试表单获取元素值</title>

    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

    <style type="text/css">

        *{

            margin: ;

            padding: ;

        }

        .main{

            padding: 0px 15px;

        }

        input{

            margin-right: 15px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="row">

            <label>姓名:</label><input type="text" name="name" value="" />

        </div>

        <div class="row">

            <label>多选:</label>

            <label for="checkbox1">多选1:</label><input type="checkbox" name="多选" id="checkbox1" value="checkbox1">

            <label for="checkbox2">多选2:</label><input type="checkbox" name="多选" id="checkbox2" value="checkbox2">

            <label for="checkbox3">多选3:</label><input type="checkbox" name="多选" id="checkbox3" value="checkbox3">

        </div>

        <div class="row">

            <label>下拉:</label>

            <select name="opt">

                <option value="opt1" name="opt">下拉1</option>

                <option value="opt2" name="opt">下拉2</option>

                <option value="opt3" name="opt">下拉3</option>

                <option value="opt4" name="opt">下拉4</option>

            </select>

        </div>

        <div class="row">

            <label>单选:</label>

            <label for="radio1">单选1:</label><input type="radio" name="radio" id="radio1" value="radio1">

            <label for="radio2">单选2:</label><input type="radio" name="radio" id="radio2" value="radio2">

            <label for="radio3">单选3:</label><input type="radio" name="radio" id="radio3" value="radio3">

            <label for="radio4">单选4:</label><input type="radio" name="radio" id="radio4" value="radio4">

        </div>

        <button id="submit">提交</button>

    </div>

    <script type="text/javascript">

        $("#submit").on("click",function(){

            //给多选框的某个选中

            $(".main").find("input[name='多选']")[].checked=true;

            //获取多选框选中的索引：

            console.log("多选框suoyin："+$("input[name='多选']").index($("input[name='多选']:checked")));

            //获取复选框选中的值：

            var arr=document.getElementsByName("多选");

            for(var i=;i<arr.length;i++){

                if(arr[i].checked){

                    console.info("多选框:"+arr[i].value);

                }

            }

             //反选

            // $('input[name="多选"]').each(function () {

            //     $(this).prop("checked", !$(this).prop("checked"));

            // });

            //输入框设置值

            $("input[name='name']").val("wlz111")

            //获取输入框值：

            console.info("输入框:"+$("input[name='name']").val());

            //将下拉框设置成某个值

            $(".main").find("select[name='opt']").get().selectedIndex = ;

            //获取下拉框值

            console.log("下拉框："+$('select').val());

            //单选按钮设置值

            $(".main").find("input[name='radio']")[].checked=true;

            //获取单选按钮的值：

            console.log("单选按钮："+$(".main").find("input[name='radio']:checked").val());

            //获取单选按钮选中的索引：

            console.log("单选按钮suoyin："+$("input[type=radio]").index($("input[type=radio]:checked")));  

        })

    </script>

</body>

</html>

radio，checkbox，select，input text获取值，设置哪个默认选中的更多相关文章

  1. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...

  2. 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中，附录 js 返回上一页

    1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr  变量一维数组) <div ...

  3. Jquery获取input=text 的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  5. Radio Checkbox Select 操作

    一个小总结 <!DOCTYPE html> <html> <head> <meta name="description" content= ...

  6. 今个忽然晓得，原来radio不是普通去获取值的！

    今日,写js校验.对于不太会的,总是陌生的.碰见radio的取值,习惯的用document.getElementsByName("")[0].value去获取值,却忘记了radio ...

  7. 【VC++技术杂谈002】打印技术之获取及设置系统默认打印机

    本文主要介绍如何获取以及设置系统的默认打印机. 1.获取系统中的所有打印机 获取系统中的所有打印机可以使用EnumPrinters()函数,该函数可以枚举全部的本地.网络打印机信息.其函数原型为: B ...

  8. 用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 在手机端有些浏览器用jQuery的attr()方法设置sele ...

  9. RadioButtonFor值为false.默认选中的问题

    (自己看了下.图片有点宽.显示的不全.可以右键新标签查看) 作为一个新手.今天又开始了mvc的学习之旅.然而学习过程中又遇到了一个奇妙的问题.... 一切按部就班到了这里.注册界面. 一眼看上去就不对 ...

随机推荐

  1. 蓝桥杯 历届试题 剪格子（dfs搜索）

    历届试题 剪格子 时间限制:1.0s   内存限制:256.0MB 问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |* || +--****--+ ||* | ** ...

  2. hdu 1520(简单树形dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:dp[u][0]表示不取u的最大价值,dp[u][1]表示取u的最大价值,于是有dp[u] ...

  3. Go基础---->go的第一个程序

    今天我们学习搭建一个学习go语言的开发环境. Go语言 一.下载go 下载地址:https://golang.org/dl/ 校验下载,在命令行输入go version 二.编写第一个hello wo ...

  4. 【BZOJ3572】[Hnoi2014]世界树 虚树

    [BZOJ3572][Hnoi2014]世界树 Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森 ...

  5. Angular2+ 基本知识汇总

    Angular是Google推出的Web前端开发框架,从12年发布起就受到了强烈的关注,他首次提出了双向绑定的概念,让人耳目一新. Angular 2特性 就在2016年9月中旬,时隔4年,Googl ...

  6. nexus配置第三方库文件

    进入nexus管理界面 默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...

  7. java WebSocket的实现以及Spring WebSocket

    开始学习WebSocket,准备用它来实现一个在页面实时输出log4j的日志以及控制台的日志. 首先知道一些基础信息: java7 开始支持WebSocket,并且只是做了定义,并未实现 tomcat ...

  8. 【Python Programe】WSGI (Web Server Gateway Interface)

    Part1: What is a Web server? 一个位于物理服务器上的网络服务器(服务器里的服务器),等待客户端去发送request,当服务器接收到request,就会生成一个respons ...

  9. UITextView 的 return响应事件

    在UITextView里没有UITextField里的- (BOOL)textFieldShouldReturn:(UITextField *)textField;直接的响应事件;那么在TextVie ...

  10. glibc-2.23_malloc_consolidate_浅析