jQuery - 获取爱好
2024-08-24 04:39:54
<!DOCTYPE html >
<html>
<head>
<title> 获取爱好 </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head> <body>
<form id="myForm">
<h3>选择你的爱好：</h3>
<ul id="hobby">
<li><input type="checkbox" value="音乐" />音乐</li>
<li><input type="checkbox" value="登山" />登山</li>
<li><input type="checkbox" value="游泳" />游泳</li>
<li><input type="checkbox" value="阅读" />阅读</li>
<li><input type="checkbox" value="打球" />打球</li>
<li><input type="checkbox" value="跑步" />跑步</li>
<li><input type="checkbox" value="其他" />其他</li>
</ul>
<hr/>
<ul>
<li><input type="button" value="查看我选择的爱好" /></li>
</ul>
<p id="text"></p> </form>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
var value = "";
/*$(":checkbox:checked").each(function() {
value += $(this).val() + "<br/>";
});*/
var $hobbies = $(":checkbox:checked");
for (var i = 0; i < $hobbies.length; i++) {
value += $hobbies[i].value + "<br/>";
}
$("#text").html(value);
});
});
</script> </body>
</html>
获取爱好.html
最新文章
- JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
- Format
- linux命令：chmod
- BOP 2016 复赛题目
- How far away[HDU2586]
- OSCache 缓存技术
- .NET小项目之MyKtv(歌曲播放功能实现)
- Java读书笔记二（封装类）
- stagefright omx小结
- ThinkPHP中的__initialize()和类的构造函数__construct()
- AttributeError: 'module' object has no attribute 'Thread'
- Union、Union All、Except、InterSect的区别
- iOS有关图片处理的总结 （四）------图片的饱和度，亮度，对照度。
- C语言程序设计第一次实验
- MySQL主主复制（双主复制）配置过程介绍
- Redis学习-set数据结构
- Spring MVC和Spring Boot的理解以及比较
- 1024. Video Stitching
- 设置linux新用户默认当前目录及使用的shell
- 微信公众号H5支付步骤