Использование javascript и html для отображения изображений при установленном флажке - PullRequest
Новая
       0

Использование javascript и html для отображения изображений при установленном флажке

2 голосов
/ 07 октября 2011

Я пытаюсь создать страницу, которая генерирует простые пользовательские отчеты, основанные на флажках, которые нажимает пользователь. С левой стороны у меня будет вертикальный столбец флажков. Для простоты, скажем, у меня есть два флажка с надписью «Население» и «Занятость».

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

Я слабо знаком с HTML и новичок в Javascript. Я пытался сделать это с помощью if операторов и document.write, но не могу оставить свои флажки на странице при создании изображения.

Вот мой текущий код: 

<html>
    <head>
        <script language="javascript" type="text/javascript">
        function checker(that) {
            if (that.checked) {
                document.write("<br /><br /><img src='employment.png'>");
            }
        }
        </script>
    </head>
    <body>
        <form>
            <input type="checkbox" name="Box" onclick="checker(this)"> Employment <br />
        </form>
    </body>
</html>

Ответы [ 4 ]

1 голос
/ 07 октября 2011

Вот как выглядит решение в AngularJS : 

<script src="http://docs-next.angularjs.org/angular-0.10.1.min.js" 
  ng:autobind></script>

<p>
<input type="checkbox" name="production" id="production" />
<label for="production">Production</label>
</p>

<p>
<input type="checkbox" name="employment" id="employment" />
<label for="employment">Employment</label>
</p>

<img src="http://i.i.com.com/cnwk.1d/i/bto/20071106/OLPC_photo_540x360.jpg" 
  ng:show="production" />
<img src="http://www.sunriseenterprisesinc.com/main/Portals/0/EmploymentSmall.jpg" 
  ng:show="employment" />

С примером можно поиграть здесь: http://jsfiddle.net/psyho/nrdnx/

0 голосов
/ 07 октября 2011

Вот быстрый пример, с чего можно начать. Вы можете увидеть это в действии здесь . 

<script>
  function toggleVisibility(id) {
   var el = document.getElementById(id);

   if (el.style.visibility=="visible") {
          el.style.visibility="hidden";
     }
     else {
          el.style.visibility="visible";
     }
 }
</script>

<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>


<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation"  onChange="toggleVisibility('imgpopulation');" />
<hr />

<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG"  style="visibility:hidden"/>
<img id="imgpopulation" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG"  style="visibility:hidden" />
0 голосов
/ 07 октября 2011

Обычно люди используют такие фреймворки, как jQuery. Это позволяет вам абстрагироваться от мельчайших деталей и кросс-браузерной боли. Используя это, вы выполняете задачу, которую вы описываете так:

http://jsfiddle.net/3vQJZ/3/

А вот код этой рабочей демонстрации: 

<input type="radio" name="selectPicture" value="http://i170.photobucket.com/albums/u277/AmandaisAwesomeQUACK/monkey.gif"/>
<input type="radio" name="selectPicture" value="http://freesmileyface.net/smiley/animals/monkey-crush2.gif" checked/>
<img id="image" src="http://freesmileyface.net/smiley/animals/monkey-crush2.gif" alt="image selected by radio buttons"/>

$(document).ready(function(){
    $('input[name=selectPicture]').click(function(){
        $('#image').attr('src', $('input[name=selectPicture]:checked').val());
    });
});
0 голосов
/ 07 октября 2011

Вы можете обработать событие change для флажков.Вот полный пример (но без изображений): http://jsfiddle.net/minitech/hsF9s/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...