0

Приветствую всех вошедших. Пробиваю одну тему, и ее аккуратно спрошу.

Представьте себе форма (достаточно простая), внутри формы 2 input-radio. Прошу помочь с 2мя вопросами:

Первое: Можно ли сделать такой JS, что бы при переключении input-radio скрывал div? Представьте, вы загрузили такую форму, и видите ее всю, нажили на переключатель - и часть формы скрывалась.

<form...>
<input type="radio" CHECKED>
<input type="radio">
<input type="text"...>    
<input type="text"...>

<div id="div_kotoriy_menayetsa">
<input type="text"...>
<input type="text"...>
<input type="text"...>
</div>

<input type="hidden" value="ch1">
<input type="submit"...>

</form>

Второе: можно ли при загрузке формы сделать аналогичный, но противоположный данному скрипт, что бы изначально 2й (а не 1й) input-radio будет CHECKED, и соответственно, div хочется изначально скрыть?

upd. поправил маленькую ошибку

2
  • Исправьте imput на input. Вкратце - эти задачи легко выполнимы. 26 дек 2012 в 8:58
  • обновил. даже не заметил сразу
    – frank
    26 дек 2012 в 9:06

3 ответа 3

4

Первое: Можно ли сделать такой JS

Можно.

Второе: можно ли при загрузке формы сделать аналогичный, но противоположный данному скрипт, что бы изначально 2й (а не 1й) input-radio будет CHECKED,

Можно.

4
  • 1
    Плюсую :) Хотел такой же написать ответ, но ограничился комментарием. 26 дек 2012 в 9:09
  • Весело. Кодом напугаете?
    – frank
    26 дек 2012 в 9:16
  • Нет не напугаем, какой вопрос, такой и ответ. Ты же написал, "можно ли" и получил ответ "Можно". Кода ты как я знаю и уверяю не писал, но хочешь чтобы тут тебе его написали "как бы нечаянно в помощь", чтобы самому не думать, я не прав? Что ты сам сделал для того чтобы твоя форма так работала? Ничего, кроме вопроса на данном форуме. Код на Jquery или на JS всего 1 строка. ("input[@name=''][checked]").val(); // так для справки. \+ обернуть все это на событие онклик.
    – Artem
    26 дек 2012 в 9:27
  • Сам думаю как это написать уже неделю. до этого 2 мои предыдущие темы здесь же на хэшкоде окончились ничем. Единственное что я узнал, что не нужно в форму таблицу совать. По поводу одна строка - т.к. сам пытался писать, узнал что все же не одна. Попробую с этим советом, что то еще сообразить
    – frank
    26 дек 2012 в 9:48
2

@frank, форму твою надо чуток изменить:

<form>
    <input type="radio" name="switch-div_kotoriy_menayetsa" value="1">
    <input type="radio" name="switch-div_kotoriy_menayetsa" value="0" checked="checked">
    <input type="text" >    
    <input type="text" >

    <div id="div_kotoriy_menayetsa">
    <input type="text" >
    <input type="text" >
    <input type="text" >
    </div>

    <input type="hidden" value="ch1">
    <input type="submit">

</form>

А вот сам скрипт (не чистый JS):

<!-- Да, вариант с jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>

$('input[type=radio][name=switch-div_kotoriy_menayetsa]').change(function() {
    $('#div_kotoriy_menayetsa').toggle(
        $('input[type=radio][name=switch-div_kotoriy_menayetsa]:checked').val() == 1 ? true : false);
    })
    .change();

</script>

Можно и без заморочек с jQuery, но тогда или коряво будет, или этот простой скрипт пожирнеет.

У какого radio будет checked="checked", тот и будет по умолчанию включен, соответственно, и div будет либо скрыт либо показан после загрузки страницы.

1
  • да, это не принципиально, с JQ или нет. спасибо
    – frank
    26 дек 2012 в 11:24
2
var el_hide = $('#div_kotoriy_menayetsa');
el_hide.hide(); // скрываем необходимый элемент

$("input:radio:not(:checked)").click(function() {   
    el_hide.toggle('slow');

//  TODO: На Ваше усмотрение
//  $("input:radio:checked").attr("checked", false);
//  $(this).attr("checked", true);

})

P.S. Вопрос тривиальный и потому, чтобы не получать ответ подобно вышеприведённому, необходимо выработать в себе дисциплину самостоятельности.

2
  • к сожалению акцепт уже влепил, но на будущее учту и решение и совет по поведению
    – frank
    26 дек 2012 в 11:25
  • 1
    @frank Вот неплохой материал по селекторам для начинающих от "старателя" Шевчука. [jQuery для начинающих. Селекторы][1] [1]: anton.shevchuk.name/javascript/jquery-for-beginners-selectors
    – romeo
    26 дек 2012 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.