JS（JavaScript）事件处理（事件绑定）趣味案例

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

谁家玉笛暗飞声，散入春风满洛城。
此夜曲中闻折柳，何人不起故园情。
——《春夜洛城闻笛》

文章目录

JS（JavaScript）事件处理（事件绑定）趣味案例
- 1. 创建表格
- - 1.1 示例代码
  - 1.2 页面效果
- 2. 创建表单
- - 2.1 示例代码
  - 2.2 页面效果
- 3. 添加样式
- - 3.1 示例代码
  - 3.2 页面效果
- 4. 表格中的事件绑定
- - 4.1 示例代码
  - 4.2 页面效果
- 5. 表单中的事件绑定
- - 5.1 示例代码
  - 5.2 页面效果
- 6. 复选框功能实现
- - 6.1 示例代码
  - 6.2 页面效果
- 7. 示例代码下载

JS（JavaScript）入门指南
JS（JavaScript）入门指南（DOM、事件处理、BOM、数据校验）
JS（JavaScript）学习专栏

JS（JavaScript）事件处理（事件绑定）趣味案例

通过创建一个页面来实现事件处理相关的操作，以下为实例演示部分，主要针对dom操作表格以及事件相关的操作。

1. 创建表格

创建一个表格，表格每行最后有一个按钮，按钮为删除当前行的事件
表格页脚有两个按钮：首行删除和末行删除

1.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-创建一个表格</title></head>
<body><!-- 将表格放到div块中，方便后续操作 --><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table></div>
</body>
</html>

1.2 页面效果

使用浏览器打开页面，效果如下，此时按钮并未生效，需要后续绑定事件
在这里插入图片描述

2. 创建表单

在前面表格的基础上，创建一个表单，表单中设置的是input输入，有文本、单选、按钮，用来对上面的表格进行数据的操作

2.1 示例代码

表单示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-创建一个form表单</title></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师：<input type="text" id="name"><br>英雄：<input type="text" id="heroName"><br>定位：<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格：<input type="text" id="price"><br>技能：<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

2.2 页面效果

使用浏览器打开页面，如下，表单中的事件也并未绑定，暂时无效
在这里插入图片描述

3. 添加样式

为表格和表单添加样式，优化以下视觉效果

3.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表格和表单添加样式</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师：<input type="text" id="name"><br>英雄：<input type="text" id="heroName"><br>定位：<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格：<input type="text" id="price"><br>技能：<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

3.2 页面效果

使用浏览器打开页面，如下，看起来好一点点
在这里插入图片描述

4. 表格中的事件绑定

先为表格中的按钮绑定事件，编写js代码

4.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表格中的按钮绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style><script>//页面加载完之后触发事件window.onload=function(){//为技能按钮绑定事件（删除，点击技能释放大招，删除当前行）var btFuns = document.querySelectorAll(".del");//遍历所有按钮，移出当前行，即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签，其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象，然后通过标签tr获取集合，删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();}//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;}}//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师：<input type="text" id="name"><br>英雄：<input type="text" id="heroName"><br>定位：<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格：<input type="text" id="price"><br>技能：<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

4.2 页面效果

使用浏览器打开页面，如下，此时可以点击技能框里的技能进行删除当前行，也可以点击右下角的首行删除和末行删除进行首行和末行的删除
在这里插入图片描述

5. 表单中的事件绑定

5.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表单中的按钮绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;/* background-color: lightblue; */}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;/* 表格背景色 *//* background-color: lightblue; */}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style><script>//页面加载完之后触发事件window.onload=function(){//为添加按钮绑定事件// document.getElementById("btnAdd")$("btnAdd").onclick=function(){//创建trvar tr = document.createElement("tr");//创建tdvar tdName = document.createElement("td");var tdHeroName = document.createElement("td");var tdActor = document.createElement("td");var tdPrice = document.createElement("td");var tdFun = document.createElement("td");//将数据添加到td中tdName.innerHTML=$("name").value;tdHeroName.innerHTML=$("heroName").value;// tdActor.innerHTML=$("actor").value;//根据勾选的位置将对应的值填入定位一栏if($("tank").checked){tdActor.innerHTML=$("tank").value;}if($("warrior").checked){tdActor.innerHTML=$("warrior").value;}if($("assassin").checked){tdActor.innerHTML=$("assassin").value;}if($("master").checked){tdActor.innerHTML=$("master").value;}if($("shooter").checked){tdActor.innerHTML=$("shooter").value;}if($("addjunct").checked){tdActor.innerHTML=$("addjunct").value;}tdPrice.innerHTML=$("price").value;// tdFun.innerHTML=$("func").value;//创建按钮var btnFun = document.createElement("input");btnFun.type = "button";btnFun.value = $("func").value;//为按钮绑定事件用于删除btnFun.onclick = function(){this.parentNode.parentNode.remove();}tdFun.appendChild(btnFun);//将td添加到tr中tr.appendChild(tdName);tr.appendChild(tdHeroName);tr.appendChild(tdActor);tr.appendChild(tdPrice);tr.appendChild(tdFun);//将tr添加到tbody中$("tb").appendChild(tr);}//为技能按钮绑定事件（删除，点击技能释放大招，删除当前行）var btFuns = document.querySelectorAll(".del");//遍历所有按钮，移出当前行，即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签，其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象，然后通过标签tr获取集合，删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();}//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;}}//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师：<input type="text" id="name"><br>英雄：<input type="text" id="heroName"><br>定位：<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格：<input type="text" id="price"><br>技能：<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

5.2 页面效果

使用浏览器打开页面，如下，此时可以填写召唤师、英雄、价格、技能，然后勾选定位的位置，进行添加信息到表格中
在这里插入图片描述

6. 复选框功能实现

在每行最前面加上复选框按钮，最上面的按钮是全选按钮。
全选按钮选中后，下方所有复选框都自动勾选，反之亦然。
下方复选框全部勾选后，全选按钮的复选框自动勾选。
对新增的行也要满足。
在复选框那列最先放设置删除所勾选的内容按钮，可删除所有勾选的内容。

6.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-添加复选框并绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;/* background-color: lightblue; */}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;/* 表格背景色 *//* background-color: lightblue; */}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}/* 复选框删除按钮样式设置 */#tt tfoot tr td{text-align: center;}</style><script>//页面加载完之后触发事件window.onload=function(){//为添加按钮绑定事件// document.getElementById("btnAdd")$("btnAdd").onclick=function(){//创建trvar tr = document.createElement("tr");//创建tdvar tdName = document.createElement("td");var tdHeroName = document.createElement("td");var tdActor = document.createElement("td");var tdPrice = document.createElement("td");var tdFun = document.createElement("td");//添加复选框var tdCheckbox = document.createElement("td");//将数据添加到td中tdName.innerHTML=$("name").value;tdHeroName.innerHTML=$("heroName").value;// tdActor.innerHTML=$("actor").value;//根据勾选的位置将对应的值填入定位一栏if($("tank").checked){tdActor.innerHTML=$("tank").value;}if($("warrior").checked){tdActor.innerHTML=$("warrior").value;}if($("assassin").checked){tdActor.innerHTML=$("assassin").value;}if($("master").checked){tdActor.innerHTML=$("master").value;}if($("shooter").checked){tdActor.innerHTML=$("shooter").value;}if($("addjunct").checked){tdActor.innerHTML=$("addjunct").value;}tdPrice.innerHTML=$("price").value;// tdFun.innerHTML=$("func").value;//创建按钮var btnFun = document.createElement("input");btnFun.type = "button";btnFun.value = $("func").value;//为按钮绑定事件用于删除btnFun.onclick = function(){this.parentNode.parentNode.remove();}tdFun.appendChild(btnFun);//为复选框添加属性var checkboxInfo = document.createElement("input");checkboxInfo.type="checkbox";checkboxInfo.className="checkboxed";checkboxInfo.onclick=function(){var checks = document.querySelectorAll(".checkboxed");//统计已选中的数量var count = 0;for(var j=0; j<checks.length; j++){if(checks[j].checked){count++;}}//判断是否全部选中if(count==checks.length){$("all").checked=true;}else{$("all").checked=false;}};//将复选框的input标签添加到td中tdCheckbox.appendChild(checkboxInfo);//将td添加到tr中tr.appendChild(tdCheckbox);tr.appendChild(tdName);tr.appendChild(tdHeroName);tr.appendChild(tdActor);tr.appendChild(tdPrice);tr.appendChild(tdFun);//将tr添加到tbody中$("tb").appendChild(tr);};//为技能按钮绑定事件（删除，点击技能释放大招，删除当前行）var btFuns = document.querySelectorAll(".del");//遍历所有按钮，移出当前行，即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签，其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象，然后通过标签tr获取集合，删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();};//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;};// 为全选绑定事件$("all").onclick=function(){//如果全选框勾上，触发事件所有复选框全部选中if($("all").checked){var checkeds = document.querySelectorAll(".checkboxed");for(var i=0; i<checkeds.length; i++){checkeds[i].checked=true;}}else{var checkeds = document.querySelectorAll(".checkboxed");for(var i=0; i<checkeds.length; i++){checkeds[i].checked=false;}}};//实现选中所有复选框时，全选自动勾选var checks = document.querySelectorAll(".checkboxed");for(var i=0; i<checks.length; i++){checks[i].onclick=function(){var checks = document.querySelectorAll(".checkboxed");//统计已选中的数量var count = 0;for(var j=0; j<checks.length; j++){if(checks[j].checked){count++;}}//判断是否全部选中if(count==checks.length){$("all").checked=true;}else{$("all").checked=false;}};}//为删除所勾选内容的按钮绑定事件$("delChecked").onclick=function(){var checks = document.querySelectorAll(".checkboxed");for(var i=0; i<checks.length; i++){if(checks[i].checked){checks[i].parentNode.parentNode.remove();}}}};//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>全选 <input type="checkbox" id="all"></th><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th><input type="checkbox" class="checkboxed"></th><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td><input type="button" value="删除所勾选内容" id="delChecked"></td><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师：<input type="text" id="name"><br>英雄：<input type="text" id="heroName"><br>定位：<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格：<input type="text" id="price"><br>技能：<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>