效果:
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"> </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>