jquery怎么实现全选，全不选，删除功能

hugaode 2013-11-09 07:21:59
现在的问题是，我做的全选功能，当单个选择时，全选的状态不变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"><a href="${pageContext.request.contextPath}/composite/issueAddressAction_issueAddressUI.action"><img src="${basePath }/global/images/portal/wdff_2.jpg" width="127" height="23" border="0"></a>
</div>
</td>
</tr>
<tr>
<td>
<!-- <div align="center"><a href="${basePath }/portal/distribution_history.jsp"><img src="${basePath }/global/images/portal/wdff_3.jpg" width="127" height="23" border="0"></a>
</div>
-->
<div align="center"><a href="${basePath }/usermanage/issueinfo_findMyIssueInfo.action"><img src="${basePath }/global/images/portal/wdff_3.jpg" width="127" height="23" border="0"></a>
</div>
</td>
</tr>
</table>
<div align="center" style="width:150;height:22;background:url(${basePath }/global/images/portal/cpzs_left3.jpg)"></div>
</td>
<td valign="top">
<table width="713" border="1" cellspacing="0" cellpadding="0" height="220" style="border-collapse:collapse" bordercolor="cfcfcf">
<tr>
<td valign="top" bgcolor="#FFFFFF" height="57" colspan="6">
<table width="712" border="0" cellspacing="0" cellpadding="0" align="center" height="44" class="wz_jr">
<tr>
<td width="120">
<div align="center" class="fwld_2_txt">我的分发</div>
</td>
<td width="236"> </td>
<td width="74"> </td>
<td width="12">
<input type="checkbox" id="checkAll" name="pkId" />
</td>
<td width="37">全选</td>
<td class="button" >删除</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="37" bgcolor="#FFFFFF" height="37" class="wz_table_top">
<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]
...全文
1535 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
疯狂熊猫人 2013-11-11
  • 打赏
  • 举报
 回复
我以为你只问全选不起作用的问题，你说的这个，也简单啊代码如下： 

$("input[type='checkbox'][name='pkId']").click(function(){
			if($("input[type='checkbox'][name='pkId']:checked").length<4){
				$("#all").removeAttr("checked");
			}
if($("input[type='checkbox'][name='pkId']:checked").length==4){
				$("#all").attr("checked","checked");
			}
		});
这里的<4表示如果有一个复选框取消选中状态，那么就取消全选复选框的选中状态。可以根据你的要求自己修改。 =4表示如果复选框全部为选中状态，全选自动为选中状态
hugaode 2013-11-10
  • 打赏
  • 举报
 回复
按照你说的方式把chencked移除之后，还是一样的问题啊，还是全选后，然后勾掉单个的复选框时，全选的状态还是全选，里面的勾还没去掉。
hugaode 2013-11-10
  • 打赏
  • 举报
 回复
按照你说的方式把chencked移除之后，还是一样的问题啊，还是全选后，然后勾掉单个的复选框时，全选的状态还是全选，里面的勾还没去掉。
爱跳舞的铅笔头 2013-11-10
  • 打赏
  • 举报
 回复
引用 2 楼 udbwcso 的回复:

标题:
<td >
   <input type="checkbox" onclick="selectmutil();" id="selectAll">
</td>
内容:
<td >
   <input type="checkbox" name="selectOne" >
</td>

function selectmutil() {
        $("input[name='selectOne']").attr("checked", $("#selectAll").attr("checked"));
    }
同意
麦田 2013-11-10
  • 打赏
  • 举报
 回复
http://blog.csdn.net/itmyhome1990/article/details/7438406 http://blog.csdn.net/itmyhome1990/article/details/8977551 可以参考一下
尘缘udbwcso 2013-11-09
  • 打赏
  • 举报
 回复 

标题:
<td >
   <input type="checkbox" onclick="selectmutil();" id="selectAll">
</td>
内容:
<td >
   <input type="checkbox" name="selectOne" >
</td>

function selectmutil() {
        $("input[name='selectOne']").attr("checked", $("#selectAll").attr("checked"));
    }
疯狂熊猫人 2013-11-09
  • 打赏
  • 举报
 回复
开头的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"); // } // }); });
___________小P 2013-11-09
  • 打赏
  • 举报
 回复
好好看看代码
jQuery实现全选、反选和不选功能的方法详解
本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考，具体如下： 适用于网页多选后需要进行批量操作的场景（如批量删除等）。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个...
jQuery实现全选、反选和不选功能
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
Web前端开发经典案例之vue框架开发电商项目百草味案例（二）
通过计算属性来开发计算总价格的功能 在购物车组件中控制每一个商品的复选框 在购物车组件中全选复选框和每一个商品复选框关联 下载并且安装三级联动v-distpicker插件 加入编辑地址功能处理视图层和数据层
jQuery+php简单实现全选删除的方法
本文实例讲述了jQuery+php简单实现全选删除的方法。分享给大家供大家参考，具体如下： <input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中"> 删除 ↑全选checkbox <...
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 《————HTML————》 //thinkphp循环显示把data里fid赋予多选框 <td><input type=checkbox value={$vo.fid}/></td>//可在后面加td输入参数...
Web 开发

81,094

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章