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. 对mysql锁机制的学习

    1.对于mysql学习,经常翻看一些博客,论坛,好像或多或少有mysq锁机制的学习与总结,所以今天有必要 对mysql锁机制的一些个人的总结,以便以后深入的学习. 2.学习这件事,从来都是“深入浅出” ...

  2. Linux心得记录

    2014.4.8 linux环境下如何删除一个目录? rm -r linux本身提供删除目录命令——rmdir,但是如果你要删除的目录中含有子目录或者子文件,那么该命令会提示“删除失败:目录非空“也就 ...

  3. python3----scrapy(笔记)

    import scrapy import sys # import io # sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='gb ...

  4. 转：解决Python2.7的UnicodeEncodeError: ‘ascii’ codec can’t encode异常错误

    操作SQL数据库,Python使用的是版本2.7,但是在运行的时候出现了异常错误UnicodeEncodeError:'ascii' codec can't encode characters in ...

  5. 那个你经常用的abs函数（取绝对值）真的总是返回非负数吗？

    前几天在牛客网看到一道关于abs()函数返回值的题目,见下图,当时还没反应过来,第一反应是:自从我开始学C语言,就知道它是用来求int数的绝对值的,返回值当然是0或者正数啊,一看答案就是A. 后来思来 ...

  6. 使用Fastjson生成Json字符串少字段属性（数据丢失）

    最后是控制台打印生成的结果如下:FastJson生成字符串是:{"id":"2","name":"节点1"," ...

  7. 事件处理程序中 this 的指向

    js 高程 事件处理程序 章节原话(斜体表示): 13.2.1 HTML事件处理程序 在这个函数内部,this 值等于事件的目标元素,例如: <!-- 输出 "Click Me&quo ...

  8. Piwik网站访问统计软件安装

    Piwik是一个PHP和MySQL的开放源代码的Web统计软件. 它给你一些关于你的网站的实用统计报告,比如网页浏览人数, 访问最多的页面, 搜索引擎关键词等等… Piwik拥有众多不同功能的插件,你 ...

  9. java面试基础题------》抽象类和接口有什么异同

    划重点!!!! 1.抽象类(abstract class)和接口(interface)有什么异同? 相同点 * 都不能被直接实例化,都可以通过继承实现其抽象方法. * 都是面向抽象编程的技术基础,实现 ...

  10. append和innerHTML的区别以及使用方法

    1.append jquery中的append的使用方式:$("#id").append("<a href='#'>test</a>") ...