gpt4 book ai didi

jquery - 复选框上的淡入/淡出背景颜色 - Jquery

转载 作者:行者123 更新时间:2023-12-01 08:27:55 24 4
gpt4 key购买 nike

当用户选中复选框时,我想淡入/淡出行背景颜色 css。因此,当他们检查时,该行会淡入亮黄色。当他们取消选中它时,该行会淡出为白色。

这是我正在玩的JS。我正在使用颜色插件:

<script type="text/javascript"> 
<!--
$(document).ready(function(){
$("#Table input").click(function() {
if ($(this).attr("checked") == true) {
$(this).parent().parent().animate({'backgroundColor' : '#ffff99'});
} else {
$(this).parent().parent().animate({'backgroundColor' : '#ffffff'});
}
});
});
//-->
</script>

和 HTML

<form name="f"> 
<table id="Table" border="1"><tr>
<td width="117"><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
<td width="309">Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
<td>Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
<td>Click me</td>
</tr></table>
</form>

我是一个新手,所以感谢您的帮助

最佳答案

我不知道这是否是最好的解决方案,但这就是我为让您的代码正常工作所做的:

  1. 不要使用颜色插件,而是包含 jQuery UI。
  2. 密码 animate持续时间(例如 500)以及属性。
  3. .parent().parent()后添加.children()

根据要求,这是一个工作示例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css" media="screen">
html {
font-family:Helvetica, sans-serif;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
google.load('jquery', '1.4');
google.load('jqueryui', '1.7.2');
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#table input").click(function() {
var color=$(this).attr('checked')?'#ffff99':'#ffffff';
$(this).parent().parent().children().animate({'backgroundColor':color}, 500);
});
});
</script>
</head>
<body>
<form>
<table id="table">
<tr>
<td width="117">
<input type="checkbox" name="cb1" id="cb1" value="y" />
</td>
<td width="309">
Click me
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb2" id="cb2" value="y" />
</td>
<td>
Click me
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb3" id="cb3" value="y" />
</td>
<td>
Click me
</td>
</tr>
</table>
</form>
</body>
</html>

关于jquery - 复选框上的淡入/淡出背景颜色 - Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2286481/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com