当我们需要在众多信息中，找我们想要的信息时，筛选功能就会方便很多。对此，这篇文章就给大家分享一下使用JS实现对内容进行筛选的功能，可以应用的常见有很多，感兴趣的朋友可以参考。

    功能

    通过复选框对显示内容进行筛选，如，勾选后仅显示在线用户。

    代码

    js

    ※需 jQuery。

function filter() {
 var check =document.getElementById('checkbox');
 var members = $('.member');
 var status = $('.memberStatus');
 if (check.checked) {
 members.each(function(i, member) {
 if (status[i].innerText == 'Offline') {
 member.style.display = 'none';
 }
 });
 } else {
  members.each(function(i, member) {
   member.style.display = '';
  });
 }
}

    html

<input type="checkbox" name="onlineOnly" tabindex="0" id="checkbox" onclick="filter()">
<span>Show online users only</span>
<table>
 <tr class="member">
 <td>
  UserA
 </td>
 <td class="memberStatus">
  Online
 </td>
 </tr>
 <tr class="member">
 <td>
  UserB
 </td>
 <td class="memberStatus">
  Offline
 </td>
 </tr>
 <tr class="member">
 <td>
  UserC
 </td>
 <td class="memberStatus">
  Online
 </td>
 </tr>
</table>

    关于JS怎样实现对内容进行筛选的功能就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue3中做物料库有什么意义，物料的类别包括什么

  这篇文章主要介绍了如何使用vue3打造一个物料库，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

• jQuery中slow表示什么，用法是怎样的

  jquery中slow的意思是“缓慢的”，slow属性值用于控制jquery动画效果的动画速度，当参数值设置了“slow”时，元素的动画过程中会缓慢的改变元素的属性，语法为“元素对象.元素动画方法("slow")”。

• js是如何实现跨域的？教你八种方式

  本文给大家分享是的JS跨域的内容，由于同源策略的限制，满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全，但另一方面也限制了资源的使用。那么js是如何实现跨域的呢？接下来给大家分享八种方式实现跨域的方案。

• element plus的样式按需二次开发

  这篇文章主要为大家介绍了element plus的样式修改和扩展实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• js包装对象怎样理解？这三个原生对象要知

  这篇文章主要给大家分享js包装对象的内容，下文有具体的介绍和实例，对新手学习和理解js包装对象有一定的帮助，有需要的朋友可以参考借鉴，下面我们一起来学习一下吧。