<html>
<head>
<title>checkbox</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/1.js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide()
var check = $(":checkbox") //得到所有被选中的checkbox
var actor_config //定义变量
check.each(function(i){
actor_config = $(this)
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show()
}else{
$("#k_"+$(this).val()).hide()
}
}
)
})
})
ElementPlus官网右上角的开关是基于HTML和CSS来实现的。首先，利用HTML中的<input type="checkbox">这个标签来创建一个开关，然后通过CSS中不同的类来设置打开和关闭状态时开关背景图片的样式显示，最后使用JS代码来实现开关状态切换时对其他网页元素的操作。需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
