Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript]jQuery checkboxy wyróżnienie zaznaczonych
noche
post
Post #1





Grupa: Zarejestrowani
Postów: 46
Pomógł: 0
Dołączył: 20.02.2015

Ostrzeżenie: (0%)
-----


Kod
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){
        var $labelCheck = $('.checkbox3');
        $labelCheck.on("change", function() {
                $labelCheck.each( function( index, element  ) {
            
                                    if( $(this).is(':checked')) {
                                        $(this).css({"background-color": "red" });  
                                    } else {
                                        $(this).css({"background-color": "white" });  
                                    }
                                      //$(element).removeClass( "gp-red" ).addClass( "gp-white" );
                                      //$(this).css({"background-color": "red" });
                                    //};
        });
        });
        
        var $box3 = $('.box3');
        $box3.on("change", function() {
                    if ($('.box1').is(':checked')) {
                      $(this).css({"background-color": "red" });  
                    } else {
                      $(this).css({"background-color": "white" });  
                    }
        });

    });

</script>

<form action="#">
    <label class="checkbox3 gp-red"><input class="checkbox1" type="checkbox" name="vehicle1" value="Bike1" checked='checked' > bike 1 <br></label>
    <label class="checkbox3 gp-red"><input class="checkbox1" type="checkbox" name="vehicle2" value="Bike2" checked='checked' > bike 2 <br></label>
    <label class="checkbox3 gp-red"><input class="checkbox1" type="checkbox" name="vehicle3" value="Bike3" checked='checked' > bike 3 <br></label>
  <input type="submit" value="Submit">
</form>
<form action="#">
    <label class="box3 gp-red"><input class="box1" type="checkbox" name="vehicle1" value="Bike1" checked='checked' > bike 1 <br></label>
  <input type="submit" value="Submit">
</form>


chce na całej stronie wyróżnić checkbox'y które zostały zaznaczone i zmienić im tło
skrypt z zmienna $box3 działa ale nie mogę tego zrobić dla wielu checkbox'ów
jak widać to moje początki z jQ smile.gif
jak w JS mogę podglądnąć obiekt ?
proszę o podpowiedz jak to ugryść bo brakło mi już pomysłów

Go to the top of the page
+Quote Post
viking
post
Post #2





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Poczytaj o delegacji zdarzeń.
https://jsfiddle.net/s8s7r1y2/
Chcesz zrobić na zmianę czy po załadowaniu wszystkie zaznaczyć?
Podejrzeć możesz w konsoli (console.log) albo debugerze.


--------------------
Go to the top of the page
+Quote Post
olszam
post
Post #3





Grupa: Zarejestrowani
Postów: 342
Pomógł: 23
Dołączył: 20.01.2011
Skąd: Chełm

Ostrzeżenie: (0%)
-----


$(this).is(':checked') tu sprawdzasz z klasy, która jest w label czyli "checkbox3" a musisz z klasy"checkbox1"


do tego ifa zamiast $(this).is(':checked') wstaw $(this).children('.checkbox1').is(':checked')

Ten post edytował olszam 1.12.2017, 10:18:39
Go to the top of the page
+Quote Post
noche
post
Post #4





Grupa: Zarejestrowani
Postów: 46
Pomógł: 0
Dołączył: 20.02.2015

Ostrzeżenie: (0%)
-----


dzięki za podpowiedzi smile.gif

o zdarzeniach - czytam
chce aby reagowało na zmianę,
idea jest taka że ładuje się formularz gdzie jest sporo checkbox'ów i dla ułatwienia użytkownikowi chciałem dorzucić skrypt jQ reagujący na zmiany
domyślnie będzie np zielone tło po zaznaczeniu żółte
wyobraziłem sobie że to działa tak : załaduje się DOM poleci po $().ready(function(){ napotka on("change" wiec nie wykona tego co wewnątrz więc będzie domyślne tło a po zmianie wywoła funkcje

odnośnie checkbox3
uczę się smile.gif myślałem tak : chcę zmienić cały label ( stylem, klasą obojętne ) więc odwoływałem się do rodzica
udało się wykryć ale nie umiem wpływać na konkretne elementy według indexu, zmienia tylko pierwszą wartość

brakuje mi tutaj czegoś takiego tongue.gif
if( $labelCheck.each[index]['checked'] === true ) {
$labelCheck.each[index]['css'] = 'yellow' ;
}

Ten post edytował noche 1.12.2017, 11:07:56
Go to the top of the page
+Quote Post
viking
post
Post #5





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Podałem ci linka do jsfiddle wcześniej.


--------------------
Go to the top of the page
+Quote Post
noche
post
Post #6





Grupa: Zarejestrowani
Postów: 46
Pomógł: 0
Dołączył: 20.02.2015

Ostrzeżenie: (0%)
-----


dzięki wielkie specool.gif
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 00:41