✔ Onclick auf label ausführen

[bennot]

Hallo, ich habe folgenden code

<fieldset class="checkboxes">
            <label class="label_check" for="checkbox-01" ><input name="start" id="checkbox-01" value="" type="checkbox" onclick="run();" />*</label>  </fieldset>

Es handelt sich um eine Checkbox. Das Aussehen der Checkbox wird über das Ändern der Klasse bei Label gesteuert.
So kommt ein grafischer Haken beim selektieren.

Beim selektieren will ich eine JS function aufrufen. Klappt mit onclick auch super.

ABER, dadurch das ich das Aussehen der Checkbox über das Label ändere verliert die eigentliche Checkbox anscheinend ihre ursprüngliche Funktion. Das bedeutet onclick wird nicht verarbeitet.

Daher suche ich nach einer Lösung wie ich direkt über das Label eine onclick funktion auslösen kann.

zB.

<fieldset class="checkboxes">
            <label class="label_check" for="checkbox-01 onclick="run();"" ><input name="start" id="checkbox-01" value="" type="checkbox"  />*</label>  </fieldset>

^^ das funktioniert so aber nicht

Danke für Denkanstöße und ein schönes Osterfest!!

 

[ComFreek]

Hi,

der Fehler liegt an den falschen Anführungstrichen:

<label class="label_check" for="checkbox-01 onclick="run();"" >

<!-- Müsste so sein: -->
<label class="label_check" for="checkbox-01" onclick="run();" >

Allerdings dürfte CSS nicht das Event der Checkbox verhindern. Wenn du deinen CSS-Code zeigst, könnte man das Problem schon da lösen

 

[bennot]

sorry, die "" sind wohl beim kopieren passiert. Stimmt soweit. Aber danke für den Tip

hier der code CSS:

* { margin: 0; padding: 0; }


a:hover, a:active { outline: none; }
fieldset    { border: 0; padding-bottom: 9px; }
label       { display: block; cursor: pointer; line-height: 20px; padding-bottom: 0px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); }
.radios     { padding-top: 0px; background: url(../images/divider.png) repeat-x 0 0; }
.label_check input,
.label_radio input  { margin-right: 0px; }
.has-js .label_check,

.has-js .label_radio    { background: url(../images/radio-off.png) no-repeat; }
.has-js .label_check    { background: url(../images/check-off.png) no-repeat; }
.has-js label.c_on      { background: url(../images/check-on.png) no-repeat; }
.has-js label.r_on      { background: url(../images/radio-on.png) no-repeat; }
.has-js .label_check input,
.has-js .label_radio input  { position: absolute; left: -9999px; }


.textarea, input  {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
border: 1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius: 2px;
padding-right: 30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;	
min-height: 20px;
padding: 5px 8px;	

}

button.submit:hover {
opacity: .85;
cursor: pointer;
}
button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.contact_form button {
margin-left: 156px;
}
button:hover, input.button:hover, span.button:hover, button.button:hover, div.button:hover, input[type="submit"]:hover, input[type="button"]:hover, .pagenav-prev a:hover, .pagenav-next a:hover {
background: #6A9EDB;
}

Und JS:

// JavaScript Document
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {
    
    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
    
    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};

kann mir das nur so erklären das durch das ändern der Klasse von Label keine echte Checkbox mehr darunter liegt und ich beim klicken diese auch nicht wirklich aktiviere..

deswegen versuche ich onclick direkt über das label zu realisieren..

geht so was überhaupt?

warum auch immer wenn ich den JS code zwischen <label> ... </label> setze funktioniert es