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. 审批流_state_selection 相关用法

    审批流 _state_selection 前部分参数代表:新加的状态 后部分参数代表:原有系统的状态

  2. CAEmitterCell 和 CAEmitterLayer具体解释

    一.在 UIKit 中,粒子系统由两部分组成: 1·      一个或多个  CAEmitterCells :发射器电池能够看作是单个粒子的原型(比如,一个单一的粉扑在一团烟雾).当散发出一个粒子,U ...

  3. iOS开发之--调用打电话，发邮件，发短信的系统功能的代码

    1.调用 自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://admin@hz ...

  4. vue+webpack2实现路由的懒加载

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...

  5. python中的coding的格式书写形式

     # -*- coding:utf-8 -*-可以改写成以下各种形式:1,# -*- coding=utf-8 -*-2,# _*_ coding=utf-8 _*_3,# coding:utf-84 ...

  6. 【BZOJ1935/4822】[Shoi2007]Tree 园丁的烦恼/[Cqoi2017]老C的任务 树状数组

    题意:两道题差不多,都是给你一堆平面上的点,每个点有权值,然后m次询问求某一矩形区域内的点权和 题解:先离散化,然后将询问拆成左右两条线段,然后将点和这些线段一起按x坐标排序,在y轴上维护树状数组.然 ...

  7. html 标签转译反转译

    如果要在 html 标签内原样插入带 html 标签的文字,通常都会被自动解析掉,比如: document.getElementsByTagName('div')[0].innerHTML=" ...

  8. 如何给MFC的菜单项添加快捷键

    我们一起分享,如何给MFC的菜单项添加快捷键.[程序在VC6.0编译环境下编译通过.(VS2010的编译环境大同小异)] 1.程序演示环境 1.1新建一个[对话框(Dialog)]的程序.然后,New ...

  9. hibernate的.hbm.xml文件文件配置属性详解

    一般.hbm.xml文件如下面: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "- ...

  10. Struts2中的类型转换失败

    类型转换失败: 若 Action 类没有实现 ValidationAware 接口: Struts 在遇到类型转换错误时仍会继续调用其 Action 方法, 就好像什么都没发生一样. 若 Action ...