Из select сделать radio переключатели

Question

Как в этом фильтре из селектов сделать два радио переключения чтоб всё работало также?https://codepen.io/oleg-z-zin/pen/wvaBPLe Помогите плиз

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="filter-criteria">
<select id="filter-select">
  <option value="pq">Первый зал</option>
  <option value="pw">Второй зал</option>
</select>
<select id="filter-select2">
  <option value="all">14 число</option>
  <option value="pyzt">15 число</option>
</select>
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>



jQuery(document).ready(function() {

  $('#filter-criteria').add('#filter-select').add('#filter-select2').on('keyup change', function() {
    $('.item').hide();
    var txt = $('#filter-criteria').val();
    var select = $('#filter-select').val();
    var select2 = $('#filter-select2').val();

    select = select == "all" ? "item" : select;
    select2 = select2 == "all" ? "item" : select2;
    txt = txt == "" ? "item" : txt;
    $('.item').each(function() {
      var $this = $(this)
      if ($this.is('[class*=' + txt + ']') && $this.is('[class*=' + select + ']') && $this.is('[class*=' + select2 + ']')) {
        $this.show();
      }
    });
  });

  $('#filter-select').val("pq");
  $('#filter-select2').val("chet").change();

});

Answer 1

    jQuery(document).ready(function () {
        $('.item').hide();

        var val = [1];

        $('#rad1').change(function () {
            if ($('#rad1').prop('checked', true)){
                $('#rad2').prop('checked', false);
                val[0] = 1;
            }
        });
        $('#rad2').change(function () {
            if ($('#rad2').prop('checked', true)){
                $('#rad1').prop('checked', false);
                val[0] = 2;
            }
        });
        $('#rad3').change(function () {
            if ($('#rad3').prop('checked', true)){
                $('#rad4').prop('checked', false);
                val[1] = 1;
            }
        });
        $('#rad4').change(function () {
            if ($('#rad4').prop('checked', true)){
                $('#rad3').prop('checked', false);
                val[1] = 2;
            }
        });
        $('.rad1').change(function () {
            $('.item').hide();
            if (val[1] == undefined){
                if (val[0] == 1){
                    $('.pq.chet.item').show();
                    $('.pq.pyzt.item').show();
                } else if (val[0] == 2){
                    $('.pw.chet.item').show();
                    $('.pw.pyzt.item').show();
                }
            } else {
                if (val[0] == 1){
                    if(val[1] == 1){
                        $('.pq.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pq.pyzt.item').show();
                    }
                } else if (val[0] == 2){
                    if(val[1] == 1){
                        $('.pw.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pw.pyzt.item').show();
                    }
                }
            }
        })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="rad1" id="rad1">Первый зал
<input type="radio" class="rad1" id="rad2">Второй зал
<input type="radio" class="rad1" id="rad3">14
<input type="radio" class="rad1" id="rad4">15
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

Вариант с выбранным параметром "Первый зал - 14 число"
Так же добавил при первом выборе - сброс, чтобы можно было выбирать все дни по залу до выбора второго типа селекта.

    jQuery(document).ready(function () {
        $('.item').hide();

        var val = [1];

        $('.pq.chet.item').show();
        $('#rad1').prop('checked', true);
        $('#rad3').prop('checked', true);
        $('#rad1').change(function () {
            if ($('#rad1').prop('checked', true)){
                $('#rad2').prop('checked', false);
                $('#rad3').prop('checked', false);
                val[0] = 1;
            }
        });
        $('#rad2').change(function () {
            if ($('#rad2').prop('checked', true)){
                $('#rad1').prop('checked', false);
                $('#rad3').prop('checked', false);
                val[0] = 2;
            }
        });
        $('#rad3').change(function () {
            if ($('#rad3').prop('checked', true)){
                $('#rad4').prop('checked', false);
                val[1] = 1;
            }
        });
        $('#rad4').change(function () {
            if ($('#rad4').prop('checked', true)){
                $('#rad3').prop('checked', false);
                val[1] = 2;
            }
        });
        $('.rad1').change(function () {
            $('.item').hide();
            if (val[1] == undefined){
                if (val[0] == 1){
                    $('.pq.chet.item').show();
                    $('.pq.pyzt.item').show();
                } else if (val[0] == 2){
                    $('.pw.chet.item').show();
                    $('.pw.pyzt.item').show();
                }
            } else {
                if (val[0] == 1){
                    if(val[1] == 1){
                        $('.pq.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pq.pyzt.item').show();
                    }
                } else if (val[0] == 2){
                    if(val[1] == 1){
                        $('.pw.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pw.pyzt.item').show();
                    }
                }
            }
        })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="rad1" id="rad1">Первый зал
<input type="radio" class="rad1" id="rad2">Второй зал
<input type="radio" class="rad1" id="rad3">14
<input type="radio" class="rad1" id="rad4">15
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

БЛОГ НА HUSL

Из select сделать radio переключатели

Ответы (1 шт):