87,921
社区成员
发帖
与我相关
我的任务
分享做练习又遇到问题啦，大神们帮我看看。
最近都在学习锋利的JQUERY。
每次都想自己先写，然后再看看作者是怎么写的。于是，有遇到问题啦。又要上来请教论坛的前辈们啦。
这次想要实现的功能是点击CHECKBOX，表格的行会变色。
点击表格的行，行会变色，CHECKBOX也会由选择变成不选择，不选择变成选择。
下面上代码
通过下面的代码我实现了第而个功能，就是点击行，行会变色。CHECKBOX也会由选上变成没选上，没选上变成选上。
下面是我的代码。
正当我要准备实现第一个功能的时候，我发现我怎么点CHECKBOX，CHECKBOX都不改变。想要改变CHECKBOX只好点击行。于是我就疑惑了。
我就看了看笔者实现这个功能的代码是怎么写的。
下面是作者的代码：
我举得我的思路跟他是有点相似的，他是通过判断SELECTED这个CLASS是否存在来ADDCLASS或者REOMVECLASS然后改变CHECKBOX的属性。
我是先判断CHECKBOX的属性再去改变TR 的CLASS属性。
问题来了，为什么我的方法能实现功能二，不能实现功能以呢。就是点了CHECKBOX没有反应，原来是选上的，点了CHECKBOX之后还是选上了，没选的还是没选。而他是可以改变的。。。
为何呢？？？
大神们来给我说说个中原理啊。。感激不尽
每次都想自己先写，然后再看看作者是怎么写的。于是，有遇到问题啦。又要上来请教论坛的前辈们啦。
这次想要实现的功能是点击CHECKBOX，表格的行会变色。
点击表格的行，行会变色，CHECKBOX也会由选择变成不选择，不选择变成选择。
下面上代码
通过下面的代码我实现了第而个功能，就是点击行，行会变色。CHECKBOX也会由选上变成没选上，没选上变成选上。
下面是我的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style text = "text/css">
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd"); /* 奇数行添加样式*/
$("tr:even").addClass("even"); /* 偶数行添加样式*/
$("tr").click(function(){
var checked = $(":checkbox",this).attr("checked");
if(checked){
$(this).removeClass("selected");
$(":checkbox",this).attr("checked", !$(":checkbox",this).attr("checked"));
}
else{
$(this).addClass("selected");
$(":checkbox",this).attr("checked", !$(":checkbox",this).attr("checked"))
}
} )
})
</script>
</head>
<body>
<table>
<thead>
<tr><th></th> <th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type = "checkbox" /></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input type = "checkbox" /></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td><input type = "checkbox" /></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td><input type = "checkbox" /></td><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr><td><input type = "checkbox" /></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type = "checkbox" /></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
</html>
正当我要准备实现第一个功能的时候，我发现我怎么点CHECKBOX，CHECKBOX都不改变。想要改变CHECKBOX只好点击行。于是我就疑惑了。
我就看了看笔者实现这个功能的代码是怎么写的。
下面是作者的代码：
$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass('selected');
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果复选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)').addClass('selected');
})
我举得我的思路跟他是有点相似的，他是通过判断SELECTED这个CLASS是否存在来ADDCLASS或者REOMVECLASS然后改变CHECKBOX的属性。
我是先判断CHECKBOX的属性再去改变TR 的CLASS属性。
问题来了，为什么我的方法能实现功能二，不能实现功能以呢。就是点了CHECKBOX没有反应，原来是选上的，点了CHECKBOX之后还是选上了，没选的还是没选。而他是可以改变的。。。
为何呢？？？
大神们来给我说说个中原理啊。。感激不尽
...全文
请发表友善的回复…
发表回复
Hello World, 2016-06-28
- 打赏
- 举报
你的事件是加在tr上的，单击checkbox时先触发checkbox的事件，改变状态；然后事件继续冒泡，触发tr的事件，再一次改变checkbox的状态，所以……
cocotsau 2016-06-27
- 打赏
- 举报
首先，在jquery 1.6以后的版本，checkbox的checked属性值需要用prop代替attr，因为以前的attr有bug
第二，不能通过checkbox的checked（true或false）来改变checkbox的checked。举个例子：假设checkbox为未选中false，当用户点击时它会变成选中true，若此时将它的checked取反，checked又变成false，所以等于没有点击，也就没有反应了。
下面是改写的代码：
$(function() {
$("tr:odd").addClass("odd"); /* 奇数行添加样式*/
$("tr:even").addClass("even"); /* 偶数行添加样式*/
$("tr").click(function() {
//var checked = $(":checkbox",this).attr("checked");
var selected = $(this).hasClass("selected");
if (selected) {
$(this).removeClass("selected");
$(":checkbox", this).prop("checked", !selected);
} else {
$(this).addClass("selected");
$(":checkbox", this).prop("checked", !selected);
}
})
})
