zoukankan      html  css  js  c++  java
  • js——获取多选框、单选框的值

    效果:

     

    html:

    <!DOCTYPE html>
    <html lang="cn">
    <head>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>js——获取多选框、单选框的值</title>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
        </head>
    </head>
    <style>
        .d-radio {
            padding-left: 0;
            padding-bottom: 10px;
            margin-bottom: 5px;
            border-bottom: 1px solid #e2e2e2;
        }
    
        .d-radio .col-md-12 {
            padding-left: 0;
        }
    </style>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-md-2 control-label">选择:</label>
                                <div class="col-md-10">
                                    <div class="col-md-12 d-radio">
                                        <div class="col-md-12">
                                            <label class="radio-inline col-md-4">
                                                <input type="radio" value="male" name="sex"></label>
                                            <label class="radio-inline col-md-4" style="margin-left:0">
                                                <input type="radio" value="female" name="sex"></label>
                                            <label class="radio-inline col-md-4" style="margin-left:0">&nbsp;</label>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="checkbox-inline col-md-4">
                                            <input type="checkbox" value="first" name="day">周一
                                        </label>
                                        <label class="checkbox-inline col-md-4" style="margin-left:0">
                                            <input type="checkbox" value="second" name="day">周二
                                        </label>
                                        <label class="checkbox-inline col-md-4" style="margin-left:0">
                                            <input type="checkbox" value="third" name="day">周三
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <p style="text-align:center;">
                    <button onclick="getId()">提交</button>
                </p>
            </div>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
    <script>
        $(document).ready(function () {
        });
    
        //获取复选框。单选框选择值
        function getId() {
            var day = document.getElementsByName('day');
            var checkArr = [];
            var sex = $("input[name='sex']:checked").val();
            if (sex) {
                checkArr.push(sex);
            }
            for (k in day) {
                if (day[k].checked)
                    checkArr.push(day[k].value);
            }
            console.log('checkArr', checkArr);
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    [Swift]LeetCode32. 最长有效括号 | Longest Valid Parentheses
    [Swift]LeetCode31. 下一个排列 | Next Permutation
    [Swift]LeetCode30. 与所有单词相关联的字串 | Substring with Concatenation of All Words
    [Swift]LeetCode29. 两数相除 | Divide Two Integers
    时光轴的设计理念
    ITFriend开发日志20140611
    ITFriend开发日志20140611
    高中生活--第7篇–我为什么不交作业
    高中生活--第7篇–我为什么不交作业
    ITFriend网站内测公测感悟
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13164111.html
Copyright © 2011-2022 走看看