有几个非常常见的知识点,需要重点关注一下。如何显示多选框呢?<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>