首页 > 代码库 > jQuery_review之jQuery实现多选框的反选、全选、全不选

jQuery_review之jQuery实现多选框的反选、全选、全不选

2024-07-14 02:05:59   220人阅读

    有几个非常常见的知识点，需要重点关注一下。如何显示多选框呢？<input type="checkbox" name="name" value=http://www.mamicode.com/"value1">。这样就能表示两个多选框，他们具有同样的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=http://www.mamicode.com/"jquery-1.8.3.js"></script>>


联系
我们