JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navDateCon clear">
    <ul class="navDateUl fr clear">
        <li class="fl active" data-nav="date0">Все</li>
        <li class="fl" data-nav="Сегодня">Сегодня</li>
        <li class="fl" data-nav="Завтра">Завтра</li>
    </ul>
</div>

<div class="">
    <form id="myForm">
        <input type="radio" name="myRadio" value="info" >info</input>
        <input type="radio" name="myRadio" value="info2" >info2</input>
    </form>
    <div class="checkbox">
        <label><input type="checkbox" rel="foo" />foo</label>
        <label><input type="checkbox" rel="hok" />hok</label>
    </div>
</div>


<div class="widget-content clearfix">
    <div class="navDateBlock" data-block="date0">
        <h3 class="nam"  data-tre="foo" data-ch="info">foo info</h3>
        <h3 class="nam" data-tre="hok" data-ch="info2">hok info2</h3>
        <h3 class="nam"  data-tre="foo" data-ch="info3">foo info3</h3>
        <h3 class="nam" data-tre="hok" data-ch="info3">hok info3</h3>
    </div>
    <div class="navDateBlock" data-block="Сегодня">
        <h3 class="nam"  data-tre="foo" data-ch="info">Д1. Пdfg23.06.2015</h3>
        <h3 class="nam" data-tre="hok" data-ch="info2">Дasd.2dfg015</h3>
        <h3 class="nam"  data-tre="foo" data-ch="info3">Д1. П2dfg3.06.2015</h3>
        <h3 class="nam" data-tre="hok" data-ch="info2">Дasd.2dfg015</h3>
    </div>
     <div class="navDateBlock" data-block="Завтра">
        <h3 class="nam"  data-tre="foo" data-ch="info55 info7 info8 ">rrrrrrrrrrrrrrr</h3>
        <h3 class="nam" data-tre="hok foo" data-ch="info2">Завтра Дas015</h3>
        <h3 class="nam"  data-tre="foo" data-ch="info3">Завтра Д1..2015</h3>
        <h3 class="nam" data-tre="hok" data-ch="info3">Завтра Дg015</h3>
    </div>
</div>

JavaScript

$(function(){
console.log($('.navDateBlock[data-block=Завтра]').find('[data-ch*="info55"]'));
// ----------------------------------
    $(document).on('click','.navDateUl li',function(){
        if($(this).is('.active') === false){
            var myRadioactive = $('input[name="myRadio"]:checked').val();// значение активного пункта второго уровня
            var myCheckboxrel = $('.checkbox input.active').attr("rel");// значение активного пункта второго уровня
            var myUlli = $('.widget-content').find('[data-block="'+ $(this).data('nav') +'"]');
            
             $('.navDateUl li').removeClass('active');
             $(this).addClass('active');
             $('.widget-content').find('[data-block]').hide(); 
            

            
            if(myRadioactive === undefined && myCheckboxrel === undefined) {
                myUlli.show();// если второй уровень не выбран
            } else if (myRadioactive != undefined && myCheckboxrel === undefined) {
               myUlli.show();
                myUlli.children().hide();
               myUlli.find('[data-ch="'+ myRadioactive +'"]').show();
            } else if (myRadioactive != undefined && myCheckboxrel != undefined) {
            console.log($('.checkbox input.active'));
            }

        }
    });
    $('.widget-content').find('[data-block]').not('[data-block="'+ $('.navDateUl li.active').data('nav') +'"]').hide();
    
// ----------------------------------------------------


    
    
    $('#myForm input').on('change', function() {
    
        var datanav = $('.navDateUl li.active').attr("data-nav"); //узнать первый уровень
        var valuenav = $('input[name="myRadio"]:checked', '#myForm').val(); //узнать второй уровень
        var boxdatanav = $('.widget-content').find("[data-block='" + datanav + "']"); //выбрать выбраное
        var sortdatanav = boxdatanav.find("[data-ch='" + valuenav + "']"); //выбрать выбраное
    
        
       ...