Ankündigung

Einklappen
Keine Ankündigung bisher.

Radio Button mit Javascript auswählen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Radio Button mit Javascript auswählen

    Hallo,

    ich möchte in einer Bildergalerie auf die Bilder klicken und dadurch die Auswahl treffen, welches Bild genutzt wird. In der Galerie geht da noch ein Layer auf der einen Button hat und der trifft die Auswahl und startet ein Javascript. Funktioniert soweit gut, nur dass nach der Auswahl es Bildes nicht checked="checked" im Quelltext angezeigt wird und daher wird die Auswahl dann in meinem Formular nicht übernommen.

    Wir kann man das mit JS machen, dass dieses checked="checked" übernommen wird und damit auch die Auswahl bestätigt wird. Wenn ich das mit den Radio Buttons mache funktioniert das einwandfrei, aber die sollen nicht zu sehen sein.

    Hier mein HTML:

    PHP-Code:
    <section>                                        
        <
    label class="label">Bild</label>
        <
    div class="superbox col-sm-12">
            <
    div class="superbox-list">
                <
    img class="superbox-img" title="Holz" alt="100 x 100 px" data-img="http://tvd.local/images/e0c4318c-093c-41b7-8611-2456280370be.jpg" src="http://tvd.local/images/e0c4318c-093c-41b7-8611-2456280370be.jpg" data-imageid="1">
                <
    input style="display:none" id="1" name="image_id" type="radio" value="1">
            </
    div>
            <
    div class="superbox-list">
                <
    img class="superbox-img" title="Ton" alt="80 x 106 px" data-img="http://tvd.local/images/3d4da2b9-3fd4-4bcd-aee6-1aefd9dcc84f.jpeg" src="http://tvd.local/images/3d4da2b9-3fd4-4bcd-aee6-1aefd9dcc84f.jpeg" data-imageid="2">
                <
    input style="display:none" id="2" name="image_id" type="radio" value="2">
            </
    div>
            <
    div class="superbox-list">
                <
    img class="superbox-img" title="Katze" alt="100 x 100 px" data-img="http://tvd.local/images/f82a2733-e5ec-4341-8cc6-c8c21fab8a39.png" src="http://tvd.local/images/f82a2733-e5ec-4341-8cc6-c8c21fab8a39.png" data-imageid="3">
                <
    input style="display:none" id="3" name="image_id" type="radio" value="3">
            </
    div>
            <
    div class="superbox-list">
                <
    img class="superbox-img" title="Grosses Bild" alt="560 x 1099 px" data-img="http://tvd.local/images/e2d7d3be-aea2-4c20-b955-2facfecbba01.PNG" src="http://tvd.local/images/e2d7d3be-aea2-4c20-b955-2facfecbba01.PNG" data-imageid="4">
                <
    input style="display:none" id="4" name="image_id" type="radio" value="4">
            </
    div>
            <
    div class="superbox-float"></div>
        </
    div>
        <
    div class="superbox-show" style="height: 300px; display: none;"></div>
    </
    section
    Das Javascript:
    PHP-Code:
                $('.superbox').on('click''.superbox-select', function(e){
                    
    e.preventDefault();
                    var 
    imageid = $(e.currentTarget).parents('div.superbox-show').prev().find('img').attr('data-imageid');
                    
    document.getElementById('image_id').value imageid;
                    $(
    '.superbox-list').removeClass('active');
                    $(
    '.superbox-current-img').animate({opacity0}, 200, function() {
                        $(
    '.superbox-show').slideUp();
                    });
                }); 
    Danke für eure Hilfe
    Greetz Kay


  • #2
    IDs müssen mit Buchstaben anfangen ... weiterhin -> http://jsfiddle.net/der_robert/v9sy3ub5/

    Kommentar


    • #3
      Hallöchen,

      Zitat von der_robert Beitrag anzeigen
      IDs müssen mit Buchstaben anfangen ... weiterhin -> http://jsfiddle.net/der_robert/v9sy3ub5/
      Stellt sich nun die Frage, wieso man dieses Problem überhaupt mit JavaScript lösen muss, wenn es doch auch ohne geht:

      - Demo: Radio Button Image Select

      Viele Grüße,
      lotti

      Kommentar


      • #4
        Die Lösung wurde neulich schon mal gebracht, ich persönlich halte da nicht viel von. Das CSS verlässt sich hier auf eine bestimmte DOM-Struktur, semantisch wird die Zugehötigkeit label-input aber über id/for bestimmt. So gesehen entsteht hier eine Doppelkonfiguration.
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        Kommentar


        • #5
          Hallöchen,

          Zitat von nikosch Beitrag anzeigen
          Die Lösung wurde neulich schon mal gebracht, ich persönlich halte da nicht viel von. Das CSS verlässt sich hier auf eine bestimmte DOM-Struktur, semantisch wird die Zugehötigkeit label-input aber über id/for bestimmt. So gesehen entsteht hier eine Doppelkonfiguration.
          Das ist natürlich richtig und da stimme ich dir vollkommen zu. Dennoch ziehe ich diese Lösung der JavaScript-Variante vor.

          Viele Grüße,
          lotti

          Kommentar

          Lädt...
          X