项目中操作checkbox是经常碰到的,有了jquery后操作起来简单明了,代码如下:
$( function() { //全选 $("#selectAll").click( function() { $("input[name='send-mail']").each( function() { $(this).attr("checked", true); }); }); // 反选 $("#inverseAll").click( function() { $('input[name="send-mail"]').each( function() { $(this).attr("checked", !$(this).attr("checked")); }); }); // 取消全部 $("#deselectAll").click( function() { $("input[name='send-mail']").each( function() { $(this).attr("checked", false); }); }); // 选中的值 $("#sendMailAll").click( function() { var selectedStr = ""; var $sendMail = $("input[name='send-mail']"); $sendMail.each( function() { if ($(this).attr("checked")) { selectedStr += $(this).val() + ","; } }); if ($.trim(selectedStr) == "") { alert("请未选中任何数据!"); return false; } alert(selectedStr ); }); });
其页面部分代码如下:
<div>
<s:iterator value="page.result">
<tr>
<td><input type="checkbox" name="send-mail" id="send-mail-id-${sendMailId}" value="${sendMailId}"/></td>
</tr>
</s:iterator>
</div>
<div id="footer-checkbox" style="width: 100%; margin-left: 260px;">
<input type="button" id="selectAll" name="selectAll" value="全选" />
<input type="button" id="inverseAll" name="inverseAll" value="反选" />
<input type="button" id="deselectAll" name="deselectAll" value="取消" />
<input type="button" id="sendMailAll" name="sendMailAll" value="发送" />
</div>
在使用前,记得将jquery引进
<script src="js/jquery.js" type="text/javascript"></script>