<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
input{
padding: 0;
margin: 0;
}
</style>
<body>
<div>
<form>
<input name="fruit" type="checkbox" value="苹果"/>苹果
<input name="fruit" type="checkbox" value="桃子"/>桃子
<input name="fruit" type="checkbox" value="香蕉"/>香蕉
<input name="fruit" type="checkbox" value="梨"/>梨
</form>
</div>
<div id="bottom">
提交
</div>
</body>
<script>
$("#bottom").click(function() {
text = $("input:checkbox[name='fruit']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');
console.log(text);
});
</script>
</html>
