js實現篩選功能

本文實例為大家分享了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' 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。