Radio Button mit Javascript auswählen

[kay899]

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:

<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:

            $('.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({opacity: 0}, 200, function() {
                    $('.superbox-show').slideUp();
                });
            }); 

Danke für eure Hilfe
Greetz Kay

[der_robert]

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

[lottikarotti]

Hallöchen,

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

[nikosch]

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.

[lottikarotti]

Hallöchen,

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