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. 说说C#的async和await

    https://blog.csdn.net/tianmuxia/article/details/17675681/ C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步 ...

  2. Hibernate_day04--课程安排_Hibernate查询方式_对象导航查询_OID查询

    Hibernate_day04 上节内容 今天内容 Hibernate查询方式 对象导航查询 OID查询 HQL查询 查询所有 条件查询 排序查询 分页查询 投影查询 聚集函数使用 QBC查询 查询所 ...

  3. 设置eclipse中python脚本的编码格式

    今天在运行python脚本时报如下错误: SyntaxError: Non-ASCII character '\xe5' in file D:\pythonlearn1\src\day01\direc ...

  4. js文章收藏

    js文件被浏览器缓存的问题:http://www.cnblogs.com/wangtao_20/p/4589898.html

  5. Django学习笔记第十一篇--关于session

    一.session和sessionid: sessionid是cookie的一个字段,sessionid一般如下: """请求报文""" & ...

  6. ios 自定义UITableView中分组的标题sectionview

    //Section的标题栏高度 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)sec ...

  7. LeetCode-Combination Sum IV

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  8. anguglar 2+ md5加密

    1.安装 npm install ts-md5 --save 2.使用 import {Md5} from "ts-md5/dist/md5"; constructor() {co ...

  9. 几种压缩方式：zlib

    zlib:zlib.h http://www.zlib.net/manual.html 编译时加 -lz ZEXTERN int ZEXPORT compress OF((Bytef *dest, u ...

  10. mysql一个特殊的条件.字符串除以0的结果.

    select *  form  user  where  username = ''/1; 一开始一看以为还是错误的语法.... 结果出来一堆结果.. 原来条件是  ''除以1 ''除以1 结果是什么 ...