Próbuję utworzyć stronę, która generuje proste raporty niestandardowe w oparciu o pola wyboru klikają użytkownika. Po lewej stronie będę miał pionową kolumnę pola wyboru. Dla dobra prostoty, powiedzmy, że mam dwa pola wyboru oznaczone "ludność" i "zatrudnienie".

Gdy użytkownik jest zainteresowany widząc dane dotyczące zatrudnienia, sprawdzają pole "Zatrudnienie", a plik obrazu danych "zatrudnienie.jpg" zostanie wyświetlone w prawo. Jeśli usuń zaznaczenie zaznaczenia pola, obraz zniknie. Jeśli sprawdzą oba pola, oba obrazy będą podobnie wyświetlane, jeden poniżej drugiego w kolejności kliknięciu.

Jestem luźno zaznajomiony z HTML i nowy w JavaScript. Próbowałem to zrobić za pomocą oświadczeń if i document.write, ale nie mogę zachować pola wyboru na stronie, gdy obraz zostanie wygenerowany.

Oto mój obecny kod:

<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>
2
Laban Laban 7 październik 2011, 22:42

4 odpowiedzi

Najlepsza odpowiedź

Oto szybki przykład, aby zacząć. Możesz go zobaczyć w akcji Oto.

<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" />
1
JohnFx 7 październik 2011, 19:06

W ten sposób rozwiązanie wygląda w 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" />

Możesz grać z przykładem tutaj: http://jsfiddle.net/psyho/nrdnx/

1
psyho 7 październik 2011, 18:54

Możesz obsługiwać imprezę pola wyboru change. Oto pełny przykład (bez obrazów): http://jsfiddle.net/minitech/HSF9S/< 2/a >.

0
Ry- 7 październik 2011, 18:54

Zwykle ludzie używają ramy takich jak jQuery. Pozwala na abstrakcję z dala od Nitty Gritty Szczegóły i bóle przeglądarki. Korzystanie z tego, wykonasz zadanie, które opisujesz tak:

http://jsfiddle.net/3vqjz/3/

A oto kod z tego roboczego demo:

<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
Milimetric 7 październik 2011, 18:58