jQuery_review之jQuery实现多选框的反选、全选、全不选
浏览数：23 /
时间：2015年06月09日
有几个非常常见的知识点，需要重点关注一下。如何显示多选框呢？<input
type="checkbox" name="name" value="value1"><input type="checkbox" name="name" value="value2">。这样就能表示两个多选框，他们具有同样的name值，在JSP中，传到后台的时候，可以使用request.getParameterValues("name")来获取一个数组，数组中就包含了前端页面中传过来的多个复选框的值了。这个是题外话。今天的主要目的是通过jQuery的复习来看一下如何对复选框进行多选，反选以及不选的操作。
对于jQuery对多选框的操作，很基础的问题有。如何选中上面的那个多选框呢？$("input")就可以根据input在页面中来获取到多个元素，他们都是input元素，然后在后面增加一个过滤器$("input[type=‘checkbox‘]")就可以获取到两个类型为checkbox的元素了，更进一步的，再增加一个过滤，变成$("input[type=‘checkbox‘][name=‘name‘]")就可以精确的获取到上面所写的那两个元素了。
此外，因为获取的是两个元素，需要进行遍历操作的时候，应该怎么去写呢？$("input[type=‘checkbox‘][name=‘name‘]").each(function(){//TODO SOMETHING});这样就可以了，其实真的非常的简单，就跟for(int i;i++;i<10){}是一样一样的。下面是这个例子的代码，虽然很简陋，只是复习，在项目中，多精巧倒也未必，只要，能够完成需求，健壮运行，方便维护，足够了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input[type='button'][name='selectAll']").click(function(){
$("input[type='checkbox'][name='fruit']").each(function(){
$(this).attr("checked",true);
});
});
$("input[type='button'][name='disSelectAll']").click(function(){
$("input[type='checkbox'][name='fruit']").each(function(){
$(this).attr("checked",false);
});
});
$("input[type='button'][name='reverseSelect']").click(function(){
$("input[type='checkbox'][name='fruit']").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<form action="#">
<input type="checkbox" name="fruit" value="apple">apple
<input type="checkbox" name="fruit" value="orange">orange
<input type="checkbox" name="fruit" value="watermelon">watermelon
<input type="checkbox" name="fruit" value="strawberry">strawberry
<input type="button" name="selectAll" value="SelectAll">
<input type="button" name="disSelectAll" value="disSelectAll">
<input type="button" name="reverseSelect" value="reverseSelect">
</form>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
