点击该行,同时点击该行里的checkbox问题
- JScript code
$("tr").live("click", function () { var checked = $(this).find(":checkbox").attr("checked"); if (checked == "checked") $(this).find(":checkbox").attr("checked", false); else $(this).find(":checkbox").attr("checked", true); })
但是有个问题,点击该行里的checkbox同时也触发了上面的方法,导致checkbox怎么也不能进入checked状态。
于是我把方法改成如下:
- JScript code
$("tr:gt(0)").each(function () { var trHtml = $(this); trHtml.find("td:gt(0)").live("click", function() { var checked = $(this).parent().find(":checkbox").attr("checked"); if (checked == "checked") $(this).parent().find(":checkbox").attr("checked", false); else $(this).parent().find(":checkbox").attr("checked", true); }); });
还是不行,现在是第一行可以了,但其他行还是不行,请教各路高手
[解决办法]
根据JS事件的冒泡原理,给tr和checkbox同时加上click监听,点击checkbox时会先执行checkbox的click事件,这样就可以做到点tr影响checkbox,点checkbox不影响tr.
不知道是不是你要的效果,IE8下测试通过
- JScript code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <script language="javascript" src="C:\Documents and Settings\samsung\My Documents\jquery-1.4.2.js"></script> </HEAD> <BODY> <table border="1"> <tr><td><input type="checkbox"></td><td>fdsaji</td><td>fjri9ewyrtr</td><td>u8iofdsh</td></tr> <tr><td><input type="checkbox"></td><td>fdsaji</td><td>fjri9ewyrtr</td><td>u8iofdsh</td></tr> <tr><td><input type="checkbox"></td><td>fdsaji</td><td>fjri9ewyrtr</td><td>u8iofdsh</td></tr> <tr><td><input type="checkbox"></td><td>fdsaji</td><td>fjri9ewyrtr</td><td>u8iofdsh</td></tr> <tr><td><input type="checkbox"></td><td>fdsaji</td><td>fjri9ewyrtr</td><td>u8iofdsh</td></tr> </table> <script language="javascript"> var check = false; $('table tr').live('click', function(){ if (check) {check = false;return;} var cbox = $(this).find('input[type=checkbox]'); cbox.attr('checked', !cbox.attr('checked')); check = false; }); $('input[type=checkbox]').live('click', function(){ check = true; }); </script> </BODY></HTML>