jquery如何实现全选，全不选，删除功能

2013-11-13

jquery怎么实现全选，全不选，删除功能现在的问题是，我做的全选功能，当单个选择时，全选的状态不变false，还有

jquery怎么实现全选，全不选，删除功能
  现在的问题是，我做的全选功能，当单个选择时，全选的状态不变false，还有删除的不会做，求大神帮忙，谢谢。

<script type="text/javascript">

//全选/全不选
$("#checkAll").click(function(){
     if(this.checked){
    $("input[name='pkId']").attr("checked","checked");
  }else{
    $("input[name='pkId']").attr("checked",null);
  }
   });
//反选
//$("#checkAll").click(function(){
//    $("input[name='pkId']").each(function(index,DomEle){
//   if(DomEle.checked){
// $(DomEle).attr("checked",null);
// }else{
// $(DomEle).attr("checked","checked");
// }
//  });

});

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<jsp:include page="public/head.jsp"></jsp:include>

<table width="900" border="0" cellspacing="0" cellpadding="0" height="172" align="center" bgcolor="#FFFFFF" class="index_body">
  <tr>
    <td valign="top">
      <table width="882" border="0" cellspacing="0" cellpadding="0" height="11" align="center">
        <tr>
          <td> </td>
        </tr>
      </table>
      <table width="882" border="0" cellspacing="0" cellpadding="0" align="center">
      </table>
      <s:form action ="/composite/myIssueAcction_findmyissueUIfoByCondition.action"
method="POST" id="findmyissueUIfoByCondition1">
<div align="center">
        <table width="882" border="0" cellspacing="0" cellpadding="0" height="47" background="${basePath }/global/images/portal/wdff.jpg">
          <tr>
            <td width="538"> </td>
            <td width="288" valign="bottom" align="right">
              <s:textfield id = "d1" name="productName" cssClass="input" size="32" value="%{paroductName}"/>
            </td>
            <td width="52"  valign="bottom" height="29">
            <img src="${basePath }/global/images/portal/search.png" id ="findmyissueUIfoByCondition2"  onclick="search()" style="cursor:pointer">
            </td>
          </tr>
        </table>
      </div>
       </s:form>
      <table width="882" border="0" cellspacing="0" cellpadding="0" align="center"  class="fwld_2">
        <tr>
          <td colspan="2">  </td>
        </tr>
        <tr>
          <td width="155" valign="top">
            <div align="center" style="height:15;background:url(${basePath }/global/images/portal/cpzs_left1.jpg) no-repeat"></div>
            <table width="150" style="height:126;background:url(${basePath }/global/images/portal/cpzs_left2.jpg) no-repeat" >
              <tr>
                <td height="45">
                  <div align="center"><a href="${pageContext.request.contextPath}/composite/myIssueAcction_myissueUI.action"><img src="${basePath }/global/images/portal/wdff_1.jpg" width="127" height="23" border="0" ></a></div>
                </td>
              </tr>
              <tr>
                <td>

<div align="center">
<b></b>
</div>
</td>
<td width="204" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<div align="center">
<b>产品名称</b>
</div>
</td>
<td width="74" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<div align="center">
<b>产品CODE</b>
</div>
</td>
<td width="105" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<div align="center">
<b>分发方式</b>
</div>
</td>
<td width="78" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<div align="center">
<b>开始时间</b>
</div>
</td>
<td width="77" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<div align="center">
<b>结束时间 </b>
</div>
</td>
</tr>
            <s:iterator id="p" status="s" value="#pageView.records">
<s:if test="#s.odd">
<tr bgcolor="#FFFFFF">
</s:if>
<s:else>
<tr bgcolor="f2f2f2">
</s:else>
<td width="37" height="37">
<input type="checkbox" name="pkId" />
<div align="center">
<s:hidden value="%{pkId}" name="pkId"></s:hidden>
</div>
</td>
<td width="204" height="37">
<div align="center">
${productName}
</div>
</td>
<td height="37" width="74">
<div align="center">
${code}
</div>
</td>
<td height="37" width="105">
<div align="center">
${pushType}
</div>
</td>
<td height="37" width="78">
<div align="center">
${pushStarttime}
</div>
</td>
<td height="37" width="177">
<div align="center">
${pushEndtime}
</div>
</td>
</tr>
</s:iterator>
              </table>



[/code] 技术交流
[解决办法]
开头的javascript中的代码，在文档还未加载就会执行，也就是说dom元素还不存在，你就想通过jquery的选择器去操作dom元素，这是不可能的！
可以修改为
$(document).ready(function(){
//全选/全不选
$("#checkAll").click(function(){
     if(this.checked){
    $("input[name='pkId']").attr("checked","checked");
  }else{
    $("input[name='pkId']").removeAttr("checked");//移除checked属性
  }
   });
//反选
//$("#checkAll").click(function(){
//    $("input[name='pkId']").each(function(index,DomEle){
//    if(DomEle.checked){
//  $(DomEle).removeAttr("checked");//移除checked属性
//  }else{
//  $(DomEle).attr("checked","checked");
//  }
//   });
});
[解决办法]
http://blog.csdn.net/itmyhome1990/article/details/7438406
http://blog.csdn.net/itmyhome1990/article/details/8977551
可以参考一下

热点排行

Java Web开发

jquery如何实现全选，全不选，删除功能