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

102

07 апреля 2022, 20:50

Как в этом фильтре из селектов сделать два радио переключения чтоб всё работало также?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>