jquery处理复选框

   项目中操作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>
 

 

你可能感兴趣的:(JavaScript,jquery)