点击该行，同时点击该行里的checkbox有关问题-JavaSript-爱易网页

点击该行，同时点击该行里的checkbox有关问题

日期：2014-05-16　浏览次数：20428 次

点击该行，同时点击该行里的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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击该行，同时点击该行里的checkbox有关问题

相关资料更多>

推荐阅读更多>