选择爱好并在输出被选项

最新推荐文章于 2022-11-06 15:02:02 发布

jeromelive

最新推荐文章于 2022-11-06 15:02:02 发布

阅读量445

点赞数 1

本文链接：https://blog.csdn.net/jeromelive/article/details/50964354

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script type="text/javascript">
//全选
function checkall(){
var hobby = document.getElementsByTagName("input");
for(i = 0;i < hobby.length;i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true;}
}
}

//清楚全部已选
function clearall(){
var hobby = document.getElementsByName("hobby");
for(i = 0;i < hobby.length;i++){
hobby[i].checked = false;}
}

//在text栏中写入已选的运动
function checkone(){
document.getElementById("wb").value=""
var hobby = document.getElementsByName("hobby")
for(i = 1; i<hobby.length; i++){
if(document.getElementById("hobby"+i).checked){
if(i!=6){
document.getElementById("wb").value+=document.getElementById("p"+i).innerHTML+","}
else{
document.getElementById("wb").value+=document.getElementById("p"+i).innerHTML}
}}}
</script>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"><span id="p1">音乐</span>
<input type="checkbox" name="hobby" id="hobby2"><span id="p2">登山</span>
<input type="checkbox" name="hobby" id="hobby3"><span id="p3">游泳</span>
<input type="checkbox" name="hobby" id="hobby4"><span id="p4">阅读</span>
<input type="checkbox" name="hobby" id="hobby5"><spam id="p5">打球</span>
<input type="checkbox" name="hobby" id="hobby6"><span id="p6">跑步</span> <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
</body>
</html>