Обратите внимание: все стили кнопок в данных примерах - это стили сайта и в примерах их нет
Вывод блока при изменении RADIO
Для кнопок radio может быть выбрано только одно значение. Соотв. при изменении выбора мы прячем все блоки и показываем блок с ID равным значению value кнопки.
Если нет возможности привязать блок к value, например, если оно несет в себе много текстовой информации, можно по аналогии использовать любой data-атрибут.
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="radio-1" class="radio" type="radio" name="radioname" value="radio-block-1" /> <label for="radio-1">Показать блок 1</label> <input id="radio-2" class="radio" type="radio" name="radioname" value="radio-block-2" /> <label for="radio-2">Показать блок 2</label> <input id="radio-3" class="radio" type="radio" name="radioname" value="radio-block-3" /> <label for="radio-3">Показать блок 3</label> <input id="radio-4" class="radio" type="radio" name="radioname" value="radio-block-4" /> <label for="radio-4">Вариант без блока</label> <div id="radio-block-1" class="radio-blocks" style="display:none">Показан блок 1</div> <div id="radio-block-2" class="radio-blocks" style="display:none">Показан блок 2</div> <div id="radio-block-3" class="radio-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 |
$(function() { $("#" + $(".radio:checked").val()).show(); $(".radio").change(function(){ $(".radio-blocks").hide(); $("#" + $(this).val()).show(); }); }); |
Вывод блока при изменении CHECKBOX
С кнопками checkbox может быть масса различных вариантов, например, показать блок при выбранных 2-х конкретных или сделать одни неактивными, когда выбраны другие и т.д.
В примере сделано как и в предыдущем варианте, а именно, активный чекбокс = показанный блок с его значением value
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="checkbox-1" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-1" /> <label for="checkbox-1">Показать блок 1</label> <input id="checkbox-2" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-2" /> <label for="checkbox-2">Показать блок 2</label> <input id="checkbox-3" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-3" /> <label for="checkbox-3">Показать блок 3</label> <input id="checkbox-4" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-4" /> <label for="checkbox-4">Вариант без блока</label> <div id="checkbox-block-1" class="checkbox-blocks" style="display:none">Показан блок 1</div> <div id="checkbox-block-2" class="checkbox-blocks" style="display:none">Показан блок 2</div> <div id="checkbox-block-3" class="checkbox-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $(".checkbox:checked").each(function() { $("#" + $(this).val()).show(); }); $(".checkbox").click(function(){ if($(this).is(":checked")) { $("#" + $(this).val()).show(); } else { $("#" + $(this).val()).hide(); } }); }); |
Вывод блока при изменении SELECT
Вариант практически точно такой же, как с кнопками radio.
|
1 2 3 4 5 6 7 8 9 |
<select id="select"> <option value="select-block-1">Показать блок 1</option> <option value="select-block-2">Показать блок 2</option> <option value="select-block-3">Показать блок 3</option> <option value="select-block-4">Вариант без блока</option> </select> <div id="select-block-1" class="select-blocks" style="display:none">Показан блок 1</div> <div id="select-block-2" class="select-blocks" style="display:none">Показан блок 2</div> <div id="select-block-3" class="select-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 |
$(function() { $("#" + $("#select option:selected").val()).show(); $("#select").change(function(){ $(".select-blocks").hide(); $("#" + $(this).val()).show(); }); }); |
Добрый день!
А если это данные из imput?
Это и есть [b]input[/b]'ы
Да понимаю, спасибо за ответ!
Но интересует именно показ элементов в зависимости от введенного пользователем числа, например
Точно также, только [b]value [/b] будет браться из введенных данных.
Вопрос только зачем такая конструкция? Нажать всегда проще, чем писать (10-20 кнопок с цифрами уместятся где угодно).
А если у нас 50 вариантов и делать 50 скрытых блоков, то тоже что-то не так с конструкцией....
Мне нужно показать/скрыть информацию для пользователя, в зависимости от введенного им возраста ) Тут уместнее как раз запросить.
И для каждого года будет свой скрытый блок?
Для 45 лет один, а для 46 другой?
1 - Если нет, то вполне подойдет селект по группам (до 18, 18-25 и т.д.)
2 - Если нет, но группировать не нужно, то тоже подойдет селекст (выпадайка на 50 пунктов вполне нормально будет) с нужными значениями показываемых блоков.
3 - Если да, то тоже пункт 2, только с разными значениями для каждого года.
А если таки только текстовый, то все точно также, как в радио
[code]$(".yearinput").change(function(){ // Событие изменения инпута с классом yearinput
$(".year-blocks").hide(); // Прячем все блоки с классом year-blocks
$("#year" + $(this).val()).show(); // Показываем блок с ID #year50, если введено 50
});[/code]
Плюс сюда лучше добавить ограничения на ввод (убрать буквы и символы и числа под 1000)
А если нужно таки показывать блоки по группам (до 18, 18-25 и т.д.), то добавлять еще условия, при каких значениях что показывать.
[url="https://atuin.ru/blog/plyus-i-minus-dlya-polya-input/"]Тут можете пример посмотреть[/url]
И соотв. HTML
[code]<input type="text" class="yearinput">
<div class="year-blocks" id="year10">написали 10</div>
<div class="year-blocks" id="year50">написали 50</div>[/code]
Огромное Вам спасибо!!!
Последний вопрос ) если один блок подходит под несколько условий?
Придумала! Снят вопрос! Еще раз спасибо!!!
как подключить jquery?
Подключается как и любой скрипт, со своего сайта или с CDN
Только если у вас на сайте он не подключен, можно поискать решение на чистом JS для этого.
Есть вариант с кнопками?
Это или табы или просто кнопки, например:
[url="https://atuin.ru/blog/otkrytie-i-zakrytie-kontenta-na-jquery/"]Открытие и закрытие контента[/url]
[url="https://atuin.ru/blog/adaptivnye-vkladki-opentabby/"]Вкладки openTabby[/url]
[url="https://atuin.ru/blog/gorizontalnye-vkladki-s-animaciej/"]Горизонтальные вкладки[/url]
Или просто на бутстрапе