<input type="checkbox" name="prose" id="prose" value="红色">红色
<input type="checkbox" name="prose" id="prose" value="黑色">黑色
<input type="checkbox" name="prose" id="prose" value="棕色">棕色
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="stab">
<tr>
<td align="right">颜色</td>
<td>说明</td>
</tr>
</table>
希望 实现这样的效果:
点击红色,下面的表格增加一行,内容如:
红色 一个文本框
点击黑色,再增加一行,
黑色 一个文本框
如果我再把复选框为红色的勾选去掉。那么,下面表格中就会相应的删除刚才新增加红色的那一行
------最佳解决方案--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='prose']").click(function () {
if ($(this).attr("checked")) {
//如果是选中
var html = gethtml($(this).val());
$(".stab").append(gethtml($(this).val()));
} else {
//如果是取消选中
$("." + $(this).val()).remove();
}
})
function gethtml(color)
{
var html = "<tr class='"+color+"'>" +
"<td>"+color+"</td>" +
"<td><input type='text' /></td>" +
"</tr>";
return html;