尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    选中表格随之变色JQuery实现全选和反选

    作者:hi379  来源:hi379  发表时间:2009-8-14 8:55:09  点击:5387

    选中表格随之变色JQuery实现全选和反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>JQuery实现全选和反选</title>
    <style type="text/css">
    <!--
    .aaa {
     background-color: #666666;
    }
    -->
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
    <script language="javascript">
     $(document).ready(function(){
      $("input[name='selectAll']").click( function (){
       $("input[name*='chkVal']").attr("checked",this.checked);
       $("table input[@type=checkbox]:checked").parent().parent().addClass("aaa");
       $("table input[@type=checkbox]:not(:checked)").parent().parent().removeClass("aaa");
      });
      var checkAll=function(){
       var allCheck=true;
       $('input[name*=chkVal]').each(function (){
       if(!$(this).attr('checked')){
        allCheck=false;
       }
       $("input[name='selectAll']").attr("checked",allCheck);
       $("table input[name*='chkVal']:checked").parent().parent().addClass("aaa");
       $("table input[name*='chkVal']:not(:checked)").parent().parent().removeClass("aaa");
       })
      }
      //设置全选框的状态
      $("input[name*='chkVal']").click(checkAll);
      //页面载入时设置全先框的状态
      checkAll();
     });
    </script>
    </head>
    <body>
    <table width="100%" >
            <tr>
              <td width="60" bgcolor="#FFFFFF"><input type="checkbox" name="selectAll">全选</td>
               <td colspan="3" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr height="26">
                         <td align="left" width="120"><input type="checkbox" name="chkVal" value="1">
                         a</td>
      </tr><tr>
                         <td align="left" width="120"><input type="checkbox" name="chkVal" value="2">
                         b</td>
                         </tr><tr>
                         <td align="left" width="120"><input type="checkbox" name="chkVal" value="3">
                         c</td>
                         </tr><tr>
                         <td align="left" width="120"><input type="checkbox" name="chkVal" value="11">
                         d</td>
                         </tr><tr>
                         <td align="left" width="120"><input type="checkbox" name="chkVal" value="12">
                         e</td>
                      </tr>
    </table>
     
    </body>
    </html>

    不过,没有变色是可能有点问题。

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗