js——获取多选框、单选框的值

时间:2024-03-06 08:09:04

效果:

 

 

 

 

 

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>