Комбинации переключателей и переключателей - PullRequest
Новая
       21

Комбинации переключателей и переключателей

1 голос
/ 25 августа 2011

Цель состоит в том, чтобы у меня была пара переключателей, и каждая пара переключателей вставлялась в блок с сообщением в блоге.Т.е. каждый пост может быть понравившимся (включен) / не понравился (выключен).Галочка затем служит универсальным переключателем на то, как всем нравятся / не нравятся сообщения.Приведенный ниже код является всего лишь прототипом, но я хочу добавить второй флажок, позволяющий пользователям скрывать все понравившееся, скрывать все понравившееся, скрывать оба (чтобы увидеть, какие из них еще не определены) или нет.

В приведенном ниже коде я не могу заставить флажок работать независимо от переключателей.Как есть, флажок переключает переключатель в положение «Вкл.».Я хочу, чтобы радио-кнопка оставалась там, где этого хочет пользователь, и при установке флажка скрытое сообщение отображается только при включенном радио.Если радио выключено, установка флажка не должна привести ни к чему.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unhide on checkboxes/radio buttons</title>
<script type="text/javascript">
function toggleLayer(val)
{
    if(val == 'on' || val === true)
    {
        document.getElementById('a1').checked = true;
        document.getElementById('layer1').style.display = 'block';
    }
    else if(val == 'off' || val === false)
    {
        document.getElementById('a2').checked = true;
        document.getElementById('layer1').style.display = 'none';
    }
}
</script>
</head>
<body>
<form action="" method="post">
    <fieldset>
        <legend>Unhide Layer Form</legend>
        <ul>
            <li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li>
            <li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /></li>
        </ul>
    </fieldset>
</form>
<div id="layer1">You can now see this.</div>
</body>
</html>

Итак, кто-то может помочь мне изменить этот код следующим образом:

  1. добавить второй флажок
  2. Пусть первый флажок скрывает все div, где радио включено
  3. Второй флажок скрывает все div, где радио выключено.
  4. Если выбранные радиомодули помнят, где они находились, то при возврате пользователя его настройки возвращаются.

1 Ответ

0 голосов
/ 25 августа 2011

Для начала вы должны знать, что настоятельно рекомендуется использовать фреймворк.например.взгляните на JQuery.пример: вы можете начать заменять «document.getElementById» на $ (char).Это позволяет вам сосредоточиться на решении проблем, а не на том, как это сделать (какие ключевые слова, поддержка браузера и т. Д.).

...