Скрыть строки с несколькими флажками

У меня есть таблица HTML, в которой я хочу скрыть/показать строки на основе нескольких флажков.Скрыть строки с несколькими флажками

Когда флажок установлен, (на основе текстового критерия) некоторые строки скрываются, если они не отмечены, отображаются все строки. Если отмечены 2 или более флажка, все строки закрываются, за исключением тех, которые соответствуют критериям из всех выбранных флажков. Но если я сниму чекбоксы, все строки будут показаны.

Мой вопрос в том, что, сняв галочку с одного из флажков, как я могу показать ТОЛЬКО строки, которые соответствовали критериям из всех выбранных выбранных флажков?

Для лучшего понимания мне нужно проверить, какие строки уже скрыты с помощью других флажков, а не показывать их, когда флажок снят.

Пример рабочего случая: CheckBox1 и checkbox2 выбраны: только row1 показано, если я снимите checkbox2, только row1 и row3 должны быть показаны

HTML:

<label><input type="checkbox" id="checkbox1">Teacher</label> 
<label><input type="checkbox" id="checkbox2">Tennis</label> 
<label><input type="checkbox" id="checkbox3">Married</label> 

    <table id="table" border="1"> 
    <thead> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Profession</th> 
     <th>Hobby</th> 
     <th>Married</th> 
    </thead> 
    <tbody> 
    <tr id="row1"> 
     <td>John</td> 
     <td>Doe</td> 
     <td>Teacher</td> 
     <td>Tennis</td> 
     <td>Yes</td> 
    </tr> 
    <tr id="row2"> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>Doctor</td> 
     <td>Darts</td> 
     <td>No</td> 
    </tr> 
    <tr id="row3"> 
     <td>Adam</td> 
     <td>Johnson</td> 
     <td>Teacher</td> 
     <td>Skydiving</td> 
     <td>Yes</td> 
    </tr> 
    <tr id="row4"> 
     <td>Nina</td> 
     <td>Pursuit</td> 
     <td>Lawyer</td> 
     <td>Tennis</td> 
     <td>Yes</td> 
    </tr> 
    </tbody> 
    </table>

JQuery:

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
      for (var i = 0; i < 5; i++) { 
       if ((this.checked) && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length){ 
        $('#row'+i).fadeOut('slow'); 
       } 
       if (!this.checked) $('#row'+i).fadeIn('slow'); 
       } 
    }); 

    $('#checkbox2').change(function() { 
      for (var i = 0; i < 5; i++) { 
       if ((this.checked) && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length){ 
        $('#row'+i).fadeOut('slow'); 
       } 
       if (!this.checked) $('#row'+i).fadeIn('slow'); 
       } 
    }); 

    $('#checkbox3').change(function() { 
      for (var i = 0; i < 5; i++) { 
       if ((this.checked) && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length){ 
        $('#row'+i).fadeOut('slow'); 
       } 
       if (!this.checked) $('#row'+i).fadeIn('slow'); 
       } 
    }); 
});

JSFiddle DEMO

источник

2017-02-19 Carje

Вы можете создать функцию, которая проверяет все и показывает/скрыть строки, и назвать его просто на флажок change события вот пример:

function show_hide_rows() { 
 
\t var checkbox1=($('#checkbox1').is(':checked') ? true : false), 
 
\t \t checkbox2=($('#checkbox2').is(':checked') ? true : false), 
 
\t \t checkbox3=($('#checkbox3').is(':checked') ? true : false); 
 
\t 
 
\t var passed; 
 
\t for (var i = 0; i < 5; i++) { 
 
\t \t passed = false; 
 
\t \t if (checkbox1 && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length) passed = true; 
 
\t \t if (checkbox2 && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length) passed = true; 
 
\t \t if (checkbox3 && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length) passed = true; 
 
\t \t 
 
\t \t if (passed) $('#row'+i).fadeOut('slow'); 
 
\t \t else $('#row'+i).fadeIn('slow'); 
 
\t \t } 
 
} 
 

 
$(function(){ 
 
    $('input[type="checkbox"]').on('change', function(){ show_hide_rows(); }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="checkbox" id="checkbox1">Teacher</label> 
 
<label><input type="checkbox" id="checkbox2">Tennis</label> 
 
<label><input type="checkbox" id="checkbox3">Married</label> 
 

 
    <table id="table" border="1"> 
 
    <thead> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Profession</th> 
 
     <th>Hobby</th> 
 
     <th>Married</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="row1"> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>Teacher</td> 
 
     <td>Tennis</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    <tr id="row2"> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
     <td>Doctor</td> 
 
     <td>Darts</td> 
 
     <td>No</td> 
 
    </tr> 
 
    <tr id="row3"> 
 
     <td>Adam</td> 
 
     <td>Johnson</td> 
 
     <td>Teacher</td> 
 
     <td>Skydiving</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    <tr id="row4"> 
 
     <td>Nina</td> 
 
     <td>Pursuit</td> 
 
     <td>Lawyer</td> 
 
     <td>Tennis</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

источник

2017-02-19 20:13:46 Ultrazz008

Вам не нужно отслеживать это. Просто покажите все строки и обработайте критерии скрыть, чтобы скрыть соответствующие строки.

Что-то вроде этого:

When a checkbox is changed 
Show all rows 
Check all checkboxes, and hide those rows that match the criteria

Поскольку это будет исполнителем на одном кадре, браузер не будет мерцать, в результате чего в чистой и быстрой смены.

источник

2017-02-19 19:59:59 Wikiti

$(document).ready(function() { 
 
    $('#checkbox1').change(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     if ((this.checked) && $("#table #row" + i + " td:nth-child(3):not(:contains('Teacher'))").length) { 
 
     // \t \t \t \t $('#row'+i).fadeOut('slow'); 
 
     $('#table #row' + i).addClass('check1'); 
 
     } 
 
     if (!this.checked) $('#table #row' + i).removeClass('check1'); 
 
    } 
 
    }); 
 

 
    $('#checkbox2').change(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     if ((this.checked) && $("#table #row" + i + " td:nth-child(4):not(:contains('Tennis'))").length) { 
 
     // \t \t \t \t \t $('#row'+i).fadeOut('slow'); 
 
     $('#table #row' + i).addClass('check2'); 
 
     } 
 
     if (!this.checked) $('#table #row' + i).removeClass('check2'); 
 
    } 
 
    }); 
 

 
    $('#checkbox3').change(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     if ((this.checked) && $("#table #row" + i + " td:nth-child(5):not(:contains('Yes'))").length) { 
 
     //$('#row'+i).fadeOut('slow'); 
 
     $('#table #row' + i).addClass('check3'); 
 
     } 
 
     if (!this.checked) $('#table #row' + i).removeClass('check3'); 
 
    } 
 
    }); 
 
    $('.checkbox').change(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     if ($("#table #row" + i).hasClass('check1') || $("#table #row" + i).hasClass('check2') || $("#table #row" + i).hasClass('check3')) { 
 
     $('#row' + i).fadeOut('slow'); 
 
     // $('#table #row'+i).addClass('check3'); 
 
     } else { 
 
     $('#row' + i).fadeIn('slow'); 
 
     } 
 

 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" class="checkbox" id="checkbox1">Teacher</label> 
 
<label> 
 
    <input type="checkbox" class="checkbox" id="checkbox2">Tennis</label> 
 
<label> 
 
    <input type="checkbox" class="checkbox" id="checkbox3">Married</label> 
 

 
<table id="table" border="1"> 
 
    <thead> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Profession</th> 
 
    <th>Hobby</th> 
 
    <th>Married</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="row1"> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>Teacher</td> 
 
     <td>Tennis</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    <tr id="row2"> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
     <td>Doctor</td> 
 
     <td>Darts</td> 
 
     <td>No</td> 
 
    </tr> 
 
    <tr id="row3"> 
 
     <td>Adam</td> 
 
     <td>Johnson</td> 
 
     <td>Teacher</td> 
 
     <td>Skydiving</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    <tr id="row4"> 
 
     <td>Nina</td> 
 
     <td>Pursuit</td> 
 
     <td>Lawyer</td> 
 
     <td>Tennis</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Вы можете посмотреть это решение.

источник

2017-02-19 20:27:56 BhaveshSGupta

Для достижения желаемого поведения вам необходимо сохранить фактическое состояние каждого элемента, когда он будет скрыт. Для этого используется один приемник событий для всех флажков.

Логика довольно проста: перебрать все строки и скрыть текущий при следующих критериев:

флажок установлен
Строка еще не скрыты
строки содержит конкретный элемент

Каждое скрытие включает в себя обновление объекта состояния, и в конце отображаются все строки, которые не находятся в этом объекте состояния.

$(document).ready(function() { 
    $('input[type="checkbox"]').click(function() { 

    var checkbox_1 = $('#checkbox1')[0].checked 
    var checkbox_2 = $('#checkbox2')[0].checked 
    var checkbox_3 = $('#checkbox3')[0].checked 
    var state = {} 

    for (var i = 0; i < 5; i++) { 
     if (checkbox_1 && !state[i] && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length){ 
     $('#row'+i).fadeOut('slow'); 
     state[i] = "hidden" 
     } 
     if (checkbox_2 && !state[i] && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length){ 
     $('#row'+i).fadeOut('slow'); 
     state[i] = "hidden" 
     } 
     if (checkbox_3 && !state[i] && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length){ 
     $('#row'+i).fadeOut('slow'); 
     state[i] = "hidden" 
     } 
     if (!state[i]) { 
     $('#row'+i).fadeIn('slow'); 
     } 
    } 
    }); 
});

источник

2017-02-19 20:34:13 conste

Скрыть строки с несколькими флажками

ответ

Смежные вопросы