Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]ukrycie div'a po zaznaczeniu checkbox
Forum PHP.pl > Forum > Przedszkole
row
Witam,

nie mogę sobie poradzić z ukryciem całego diva (div ma id) jeśli ktoś zaznaczy checkbox.

Dziękuje za pomoc w tym
gg1985
W HTML tego nie zrobisz, łatwo będzie np. w JQuery

Kod
if($('input').attr('checked')=='checked')$('#id_diva').hide();
row
Cytat(gg1985 @ 28.11.2009, 10:49:30 ) *
W HTML tego nie zrobisz, łatwo będzie np. w JQuery

Kod
if($('input').attr('checked')=='checked')$('#id_diva').hide();

i ten kod ma być w

<script type="text/javascript">

</script>

a gdzie ('input') podaję id tego checbox'a ?
gg1985
Biblioteke ściągasz stąd:

http://code.google.com/p/jqueryjs/download...ry-1.3.2.min.js

Umieszczasz na serwerze

W headzie:

Kod
<script type="text/javascript" src="ścieżka do jquery"></script>
<script type="text/javascript">
$(document).ready(function(){
if($('#id_inputa').attr('checked')=='checked')$('#id_diva').hide();
});
</script>


Jak nie będzie działać to daj adres, to napiszę co jest źle. smile.gif
gg1985
Spróbuj tak:

Kod
$('#inputbrak').click(function(){
if($('#inputbrak').attr('checked')=='checked')$('#brakdiv').hide();
});
row
zmieniłem, ale dalej nie ukrywa tego div'a
gg1985
Czemu skasowałeś document.ready ? To musi być. Podaje jeszcze raz kompletny skrypt

Kod
<script type="text/javascript">
$(document).ready(function(){
$('#inputbrak').click(function(){
if($('#inputbrak').attr('checked')=='checked')$('#brakdiv').hide();
});
});
</script>
row
ok zmieniłem, jednak nie ukrywa div
gg1985
Kod
$(document).ready(function(){
$('#inputbrak').click(function(){
if($('#inputbrak:checked'))$('#brakdiv').hide();
});
});
Quantum
  1. <div id="jakis_div" style="display:none;">
  2. zawartosc
  3. </div>
  4.  
  5. <input type="checkbox" onclick="document.getElementById('jakis_div').style.display=(this.checked==true)? 'block':'none'">


czy ukrywanie div wymaga załączania ważącej ok. 56KB biblioteki ? smile.gif kiedyś zginiecie bez jQ biggrin.gif
gg1985
Są plusy i minusy, można też załączyć skompresowaną bibliotekę (wcześniejszą wersję) ważącą 12KB. Plus jest taki, że kod można umieścić w zewnętrznym pliku, a Twoje rozwiązanie trzeba umieszczać bezpośrednio w kodzie strony.
Quantum
Nie trzeba winksmiley.jpg można nadać checkbox-owi id i dodać event onClick smile.gif Chodziło mi raczej o to, że większość użytkowników tego forum nie widzi innych sposobów na rozwiązanie czasem banalnych problemów poza użyciem jakiegoś frameworka JS.
Oczywiście jestem za ich używaniem, ale tylko w sytuacjach gdzie są niezbędne.
piotr94
Cóż, osobiście też nie popieram stosowania "armaty na muchę"
po co nawet stosować skompresowaną bibliotekę JQuery ważącą 12 KB, skoro cały kod można zawrzeć w 80 bitach??
Oczywiście jeśli na stronie jest używanych wiele efektów (galerie zdjęć, ładowanie stron w ajax, dynamiczne sprawdzanie poprawności formularzy,...) to wtedy jest sens stosowania JQuery, w przeciwnym wypadku to przysłowiowa armata na muchę...
row
no to dzięki wszystkim wam za pomoc, oczywiście już działa. Chciałbym jeszcze dodać, aby ukrywało więcej div'ów przez zaznaczenie checkbox'a. Także z id, ale każdy ma inny
Quantum
tak na szybko coś takiego.
w sumie tym rozwiązaniem możesz spokojnie zastąpić tamto, tutaj masz możliwość manipulacji wieloma elementami smile.gif

[JAVASCRIPT] pobierz, plaintext
  1. function toggle(obj, e)
  2. {
  3. var elems = e.split(",");
  4. for(i=0;elems[i];i++)
  5. document.getElementById(elems[i]).style.display = (obj.checked==true)? 'block':'none';
  6. }
[JAVASCRIPT] pobierz, plaintext


  1. <div id="a" style="display:none;">
  2. A
  3. </div>
  4.  
  5. <div id="b" style="display:none;">
  6. B
  7. </div>
  8.  
  9. <div id="c" style="display:none;">
  10. C
  11. </div>
  12.  
  13. <input type="checkbox" onclick="toggle(this, 'a,b,c')">
row
dokładnie o to chodziło Dzięki smile.gif

Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.