核心 js
$(function () {
$("#btnSubmit").click(function () {
// 单选 radio
var sex = $('input:radio[name="sex"]:checked').val();
// 多选 checkbox
var hobbies = []; // js定义数组
$('input:checkbox[name="hobby"]:checked').each(function () {
hobbies.push($(this).val());
});
// 向html元素赋值
$('#info_sex').html(sex);
$('#info_hobby').html(hobbies);
$('#result_table').css('display', 'block');
});
});
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radioCheck</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$("#btnSubmit").click(function () {
// 单选 radio
var sex = $('input:radio[name="sex"]:checked').val();
// 多选 checkbox
var hobbies = []; // js定义数组
$('input:checkbox[name="hobby"]:checked').each(function () {
hobbies.push($(this).val());
});
// 向html元素赋值
$('#info_sex').html(sex);
$('#info_hobby').html(hobbies);
$('#result_table').css('display', 'block');
});
});
</script>
</head>
<body>
<h3>选择性别</h3>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<h3>选择爱好</h3>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="网球">网球
<input type="checkbox" name="hobby" value="台球">台球
<br>
<br>
<input type="submit" value="提交" id="btnSubmit"/>
<br>
<br>
<table id="result_table" style="display: none">
<tr>
<th>性别</th>
<td id="info_sex"></td>
</tr>
<tr>
<th>爱好</th>
<td id="info_hobby"></td>
</tr>
</table>
</table>
</body>
</html>
测试
