<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*设置css样式*/
div.box {
300px;
padding: 20px;
margin: 20px;
border: 4px dashed #ccc;
}
div.box span {
color: #999;
font-style: italic;
}
div.content {
250px;
margin: 10px 0;
padding: 20px;
border: 2px solid #ff6666;
}
input[type='checkbox'] {
margin: 5px;
}
input[type='button'] {
height: 30px;
margin: 10px;
padding: 5px 10px;
}
/*编写jquery代码*/
</style>
<script src="../jquery/jquery.min.js"></script>
<script>
$(function() {
// 设置属性值
$("input:button").click(function() {
var fruit = "";
var vegetable = "";
$("input:checkbox[name='fruit']:checked").each(function() {
fruit += $(this).val() + " ";
});
$("input:checkbox[name='vegetable']:checked").each(function() {
vegetable += $(this).val() + " ";
});
alert("已选择水果：" + fruit + "，已选择蔬菜：" + vegetable);
});
})
</script>
</head>
<body>
<div class="box">
<span>请输入用户名，限定字母、数字或下划线的组合：</span>
<br>
<div class="content">
<span>水果：</span>
<br>
<input type="checkbox" name="fruit" value="梨子" />梨子
<input type="checkbox" name="fruit" value="李子" />李子
<input type="checkbox" name="fruit" value="栗子" />栗子
<input type="checkbox" name="fruit" value="荔枝" />荔枝
<br>
<span>蔬菜：</span>
<br>
<input type="checkbox" name="vegetable" value="青菜" />青菜
<input type="checkbox" name="vegetable" value="萝卜" />萝卜
<input type="checkbox" name="vegetable" value="土豆" />土豆
<input type="checkbox" name="vegetable" value="茄子" />茄子
</div>
<input type="button" value="提交">
</div>
</body>
</html>