Показать / скрыть текст, основываясь на выбранном переключателе js

0

Я все еще изучаю javascript, и я зашел в тупик.

Итак, это то, чего я пытаюсь достичь: у меня есть 3 варианта - Типография, со спиралью и с нерюкой бумагой.

 <fieldset>
        <legend id="type">Book type:</legend>
        <input type="radio" name="books" id="book1" value="book1" onchange="updateTotal()">1.Tipography
        <br>
        <input type="radio" name="books" id="book2" value="book2" onchange="updateTotal()">2.With spiral
        <br>
        <input type="radio" name="books" id="book3" value="book3" onchange="updateTotal()">3.With unryu paper
        <br>
    </fieldset>

Когда выбрано Typography - я хочу показать эту опцию:

        <fieldset>
        <legend id="tipcolor">1.Choose tipography book color:</legend>
        <input type="radio" name="color" id="color1" value="color1" onchange="updateTotal()">green
        <br>
        <input type="radio" name="color" id="color2" value="color2" onchange="updateTotal()">orange
        <br>
        </fieldset>

И скрыть все остальные, кроме доставки (это должно быть видно все время).

То же самое для другого варианта - если выбрано С помощью спирали - показать эту опцию:

        <fieldset>
        <label id="color" class="hidden">2.Chooes spiral book color:</label>
        <input type="radio" name="color" id="color3" value="color3" onchange="updateTotal()">green
        <br>
        <input type="radio" name="color" id="color4" value="color4" onchange="updateTotal()">blue
        <br>
        <input type="radio" name="color" id="color5" value="color5" onchange="updateTotal()">orange
        <br>
        <input type="radio" name="color" id="color6" value="color6" onchange="updateTotal()">pink
        <br>
        <input type="radio" name="color" id="color7" value="color7" onchange="updateTotal()">other
        <input type="text" name "color">
        <br>
        </fieldset>

И спрячьте все остальные, кроме Shipping.

Вот как это выглядит, если jsfiddle - http://jsfiddle.net/simonapruse/Xdvem/

Может ли кто-нибудь помочь с предложениями?

Теги:

3 ответа

1
Лучший ответ

Вы можете попробовать что-то вроде этого:

  function hideOthers(selectedValue) {
        var tipography = document.getElementById('tipography'),
            spiral = document.getElementById('spiral');
        if(selectedValue === 'book1') {
            spiral.style.display = 'none';
            tipography.style.display = 'block';
        } else if(selectedValue === 'book2') {
            spiral.style.display = 'block';
            tipography.style.display = 'none';
        }
  }

Смотрите скрипку

Поделиться
  • 0
    Это выглядит просто замечательно, но когда я помещаю это в свой код, ничего не происходит. Кажется, проблема в том, что я поместил код JS не в то место. Когда я удаляю свою функцию updateTotal (); тогда это работает. Скрипка - jsfiddle.net/simonapruse/zS75r/2
  • 0
    да, вы также можете проверить мою скрипку. Я вызываю метод hideOthers () внутри updateTotal ().
Показать ещё 4 комментария
0
  • Вам нужно написать функцию javascript, например - OnBookType_Click.
  • И свяжите его с обработчиком события onClick для флажков Тип книги.
  • Укажите атрибут идентификатора для всех ваших полей.
  • в функции JS, проверьте идентификатор или значение выбранного флажка, и, соответственно, соответствующий набор полей можно сделать видимым, обратившись к нему по идентификатору. И сделайте невидимым все остальные поля.
Поделиться
0

Вы можете добавить событие onchange в первый набор полей и добавить идентификаторы в поле, которое вы хотите скрыть.

<fieldset onchange="RadioChanged()">
    <legend id="type">Book type:</legend>
    <input type="radio" name="books" id="book1" value="book1" onchange="updateTotal()">1.Tipography
    <br>
    <input type="radio" name="books" id="book2" value="book2" onchange="updateTotal()">2.With spiral
    <br>
    <input type="radio" name="books" id="book3" value="book3" onchange="updateTotal()">3.With unryu paper
    <br>
</fieldset>
<fieldset id='book1Field'>
    <legend id="tipcolor">1.Choose tipography book color:</legend>
    <input type="radio" name="color" id="color1" value="color1" onchange="updateTotal()">green
    <br>
    <input type="radio" name="color" id="color2" value="color2" onchange="updateTotal()">orange
    <br>
</fieldset>
<fieldset id='book2Field'>
    <label id="color" class="hidden">2.Chooes spiral book color:</label>
    <input type="radio" name="color" id="color3" value="color3" onchange="updateTotal()">green
    <br>
    <input type="radio" name="color" id="color4" value="color4" onchange="updateTotal()">blue
    <br>
    <input type="radio" name="color" id="color5" value="color5" onchange="updateTotal()">orange
    <br>
    <input type="radio" name="color" id="color6" value="color6" onchange="updateTotal()">pink
    <br>
    <input type="radio" name="color" id="color7" value="color7" onchange="updateTotal()">other
    <input type="text" name "color">
    <br>
    </fieldset>

Затем в javascript

function RadioChanged()
{
 if(document.getElementById('book1').checked)
 {
    document.getElementById('book2Field').style.display='none';
    document.getElementById('book1Field').style.display='initial';
 }
 else if(document.getElementById('book2').checked)
 {
    document.getElementById('book1Field').style.display='none';
    document.getElementById('book2Field').style.display='initial';
 }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню